Как сделать img с эффектом background-size: contain?

Question

[Владимир Новицкий]

Здравствуйте.
Подскажите, пожалуйста, как можно средствами css вписать в блок изображение в теге <img> с эффектом, аналогичным background-size: contain;?

Answer 1

[Alexander Sydorenko]

Это так что-ли?

jsfiddle.net/L5eL6ug8

Comments

[Владимир Новицкий]

Нет. То, что вы показали, это аналогично cover, а нужно аналогично contain.
Надо так: www.imageup.ru/img282/1952818/6184951.png

[Владимир Новицкий]

То есть, изображение должно вписываться по меньшей стороне и центрироваться. Лишнее, соответственно, должно обрезаться.

Answer 2

[Василий Черненков]

img {
  object-fit: contain;
}

при этом родитель должен иметь ширину и высоту больше 0