Изображение по размерам родителя в CSS, как?

Question

[eldar_web]

Есть к примеру div с размерами 500px на 500px. И внутри него изображение (с разные размерами).

Как сделать так, что изображение был в естественных пропорциях внутри этого блока (без никакого растяжения) ?

Answer 1

[R3AD]

img{
display: block;
max-width: 100%;
}
Это правило должно быть в любой верстке

Answer 2

[IceJOKER]

не выходя за рамки родителя?
указываете ширину равную 100% и все, высоту браузер сам вычислит, можно установить max-*, чтоб за рамки не выходило изображение

Comments

[eldar_web]

Нет, этого не достаточно.

[IceJOKER]

eldar_web: вот R3AD ответил вам, хотя не знаю зачем блочным делать, можно просто установить max-width: 100%;

Answer 3

[Stalker_RED]

Если по каким-то причинам display: block; max-width: 100%; не подходит
есть новое свойство: object-fit: cover jsfiddle.net/o5may4qp
более старое, широко поддерживаемое - background-size: cover