CSS + Верстка

padding: 0 20px 0 200px

I. Через фоновое изображение

- Создаем div;

- Задаем ему нулевую высоту;

- Задаем ему фоновое изображение;

- Обнуляем размер фонового изображения;

- Создаем псевдоэлемент before;

- Наследуем фон от родителя;

- Делим высоту на ширину и умножаем результат на сто чтобы получить значение для padding-top;

- В результате получаем следующие стили:

.image {
 background-size: 0 0;
}

.image:before {
 content: '';
 display: block;
 padding-top: 56.25%;
 background-image: inherit;
 background-repeat: no-repeat;
 background-size: cover;
}

II. Через свойство object-fit.

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

object-fit: cover;

Если ширина картинки равна 500px, а соотношение сторон должно быть 4:3, то все что остается сделать это:

(3 / 4) * 500 = 375

В итоге стили будут выглядеть примерно так:

img {
 width: 500px;
 height: 375px;
 object-fit: cover;
}

Если вам интересно то, о чем я пишу - можете заглянуть ко мне в группу вк или телеграм канал.

Допустим у нас есть страница с превью новостей:

Необходимо сделать ссылкой не только подзаголовок, но и картинку.

Способа три: плохой, злой, хороший.

Плохой

Просто обернуть и заголовок, и картинку в ссылку:

<div>
 <a href="#"><img src="image.jpg"></a>
 <h2><a href="#">text</a></h2>
</div>

Злой

Обернуть все в одну ссылку:

<a href="#">
 <img src="image.jpg">
 <h2>text</h2>
</a>

Хороший

Разместить ссылку в заголовке. Расширить область ссылки на всю карточку с помощь псевдоэлемента :before:

<div>
 <img src="image.jpg">
 <h2><a href="#">text</a></h2>
</div>

<style type="text/css">
div {
 position: relative;
}

a:before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
</style>

Конечно я утрирую и вы можете использовать любой из этих трех вариантов, но мой совет использовать последний :)