Ограничить картинку в css по одному габариту

Question

Застрял на простейшем, вроде, вопросе: ограничить картинку по большему габариту с сохранением пропорций. То есть чтобы картинка не выходила, скажем, за габарит 600px (по ширине или высоте). Если задавать max-widht:600px, max-height:600px, ломается пропорция изображения. Пробовал через различные варианты с vmin и vmax, через min(...) и clamp(...) - победить не смог

Answer 1

Что если использовать картинку как background-image с background-size: contain?

<html>
  <body>
    <div class="wrapper pict"></div>
  </body>
</html>


.wrapper {
   width: 300px;
   height: 300px;
}
.pict {
   background-image: url('https://png.pngtree.com/thumb_back/fw800/background/20230610/pngtree-picture-of-a-blue-bird-on-a-black-background-image_2937385.jpg');
   background-repeat: no-repeat;
   background-size: contain;
 }

Answer 2

В итоге сделал через object-fit. Долго тупил, с cover, пока не изменил на contain и немного поколдовал с тонкими настройками позиции и полей

БЛОГ НА HUSL

Ограничить картинку в css по одному габариту

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