Интересное css свойство object-fit

Используя свойство object-fit удобно красиво выводить картинки товаров, особенно если они разных размеров.

Ниже несколько, для демонстрации вариантов отобрадения.

Из описания: Свойство object-fit определяет, как содержимое заменяемого элемента, такого как <img> или <video>, должно заполнять контейнер относительно его высоты и ширины.

Напоминает background-size, но только для картинок, а не бэкграунда.

Вписываем изображение в фиксированный контейнер:

 
#demo1 > div {
    display: flex;
    justify-content: space-around;
}

#demo1 .parent {
    overflow: hidden;
    height: 200px;
}

#demo1 .contain {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

 
<div id="demo1">
    <div>
        <div class="parent"><img src="/images/com/soblog/items/1588/500x700.jpg" class="contain"/></div>
        <div class="parent"><img src="/images/com/soblog/items/1588/700x500.jpg" class="contain"/></div>
    </div>
</div>

Еще примеры:

Оригиналы:

500x700

Варианты:

700x500

object-fit: fill

object-fit: contain

object-fit: cover

object-fit: none

object-fit: scale-down

Также стоит обратить внимание на свойство object-position.