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;
}
Пример на
codepen.
II. Через свойство object-fit.
Если поддержка браузеров вас устраивает и вы знаете значение одной из сторон картинки, то вы можете использовать свойство:
object-fit: cover;
Если ширина картинки равна 500px, а соотношение сторон должно быть 4:3, то все что остается сделать это:
(3 / 4) * 500 = 375
В итоге стили будут выглядеть примерно так:
img {
width: 500px;
height: 375px;
object-fit: cover;
}
Если вам интересно то, о чем я пишу - можете заглянуть ко мне в группу вк или телеграм канал.
