Сегодня вам нужно будет сверстать целых 2 секции, но сначала рассмотрим новое свойство и работу с картинками. За время марафона вы узнали про тег img, свойство background и position. Но что если мы всё это соединим и добавим ещё одно свойство? Прочитайте про object-fit и пойдем дальше.

object-fit - CSS: Cascading Style Sheets | MDN

Для того, чтобы идти дальше необходимо оборачивать картинки в родительский блок. object-fit делает из картинки, по сути, почти background (учитывая отступы), но который можно менять из html.

Главная проблема картинок в том, что они могут быть разного размера (квадратные, широкие, высокие), но при этом иногда нам их нужно разместить, заполнив полностью карточку.

И тут есть 2 варианта: Либо мы можем обрезать картинку, либо нет из-за содержимого. Если не можем, то сочетание свойств ниже впишет в блок картинку как широкого размера, так и высокого:

<div class="block">
    <div class="block-img">
        <img src="3.jpg" alt="">
    </div>
</div>

width: 100%;
height: 100%;
object-fit: contain;

Теперь второй вариант: а если нам неважен контент? Тогда выберем другое значение:

width: 100%;
height: 100%;
object-fit: cover;