Как реализовать адаптивный ресайз картинки?

Question

[Vinni37]

Добрый день.
Гугл не помог.

Задача:
Имея URL на рандомную картинку, средствами css вписать ее в экран без потери пропорций.

Конкретика:

<div style="width: 100%; height:100%">
   <img src="рандом">
</div>

Все ссылвается на два варианта:

.widthScale { 
  max-width: 100%; max-height: 100%; width: 100%; height:auto
}
.heightScale {
  max-width: 100%; max-height: 100%; width: auto; height:100%
}

А как не заня пропорций экрана и пропорций картинки вписать/растянуть ее с сохранением пропорций.

Comments

[RAX7]

https://developer.mozilla.org/ru/docs/Web/CSS/obje...

[Vinni37]

Спасибо

Answer 1

[inFureal]

Просто

div {
  max-width: 100%;
}

Comments

[Vinni37]

Неправильный ответ

[Froggyweb]

1, ответ правильный
2. object-fit - ,больше проблем, чем результат

[inFureal]

Vinni37, да? Чекни