Задача: размещаю некий блок с высотой к примеру 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>