Картинка не масштабируется при использовании max-height?

Question

[zhenysloh]

Допустим есть внешний контейнер картинки, а внутри него сама картинка.

<div class="cont">
   <img class="img" src="comp.png" alt="">
</div>

Если в контейнере максимальную ширину поставить в пикселях и высоту авто, а в картинке максимальную ширину поставить 100% и высоту авто, то картинка отлично масштабируется. Если же высоту и ширину поменять местами, то ничего не работает и все ломается.

.cont {
     max-height: 800px;
     width: auto;
}

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

У меня есть три картинки и у них одинаковая высота, но разная ширина. Прописовать для каждого отдельный айди контейнера не хочется. Что делать?

Answer 1

[WapSter]

height 100% никогда не с работает на любом элементе, если у родителя не задана в px. Используй object-fit cover