css изменение высоты картинки вместе с родительским контейнером

Question

Задача: размещаю некий блок с высотой к примеру 90vh, внутри него помещаю изображение, которое по высоте будет меньше родителя. Когда браузер по высоте уменьшается до порога <= высоты картинки - картинка также должна адаптивно пропорционально уменьшаться вместе с родительским блоком. Я уменьшаю размер браузера по высоте больше нежели высота изображения - изображение все равно распирает блок (появляется вертикальная прокрутка в браузере). Возможно ли это сделать средствами CSS?

.peng {
  width: 376px;
  height: 90vh;
  position: absolute;
  right: 0;
}

.peng img {
  width: 100%;
  height: auto;
}

<div class="peng">
  <img src="https://avatars.mds.yandex.net/get-pdb/879261/58358bb3-ab54-4dbb-a367-6d30108dda74/s1200">
</div>

Answer 1

нашел решение

.peng
{
width: 376px;
height: 90vh;
position: absolute;
right: 0;
border: green 1px solid;
}

.peng img
{
width: auto;
max-width: 376px;
height: auto;
max-height: 100%;
display: block;
}

Answer 2

В CSS можно воспользоваться методом object-fit.

Имеет 94% поддержку в браузерах и не работает в IE

.peng {
  width: 376px;
  height: 90vh;
}

.peng img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: red;
}

.peng.cover img {
  object-fit: cover;
}

<div class="peng">
  <img src="https://avatars.mds.yandex.net/get-pdb/879261/58358bb3-ab54-4dbb-a367-6d30108dda74/s1200">
</div>

<br />

<div class="peng cover">
  <img src="https://avatars.mds.yandex.net/get-pdb/879261/58358bb3-ab54-4dbb-a367-6d30108dda74/s1200">
</div>

БЛОГ НА HUSL

css изменение высоты картинки вместе с родительским контейнером

Ответы (2 шт):