Создание адаптивных изображений с сохранением пропорций с помощью CSS: Метод «padding hack»

Ранее мы уже рассматривали, как можно управлять размерами изображений с помощью CSS и HTML, чтобы сохранять их пропорции. Такие подходы, как использование img с фиксированными пропорциями, становятся основой адаптивного веб-дизайна. Сегодня мы рассмотрим еще один простой и эффективный метод, известный как «padding hack», который позволяет создавать адаптивные изображения с определенными пропорциями.

Почему «padding hack»?

Пока свойство CSS aspect-ratio ждет повсеместной поддержки

Шаги для реализации «padding hack»

1. Установка высоты родительского элемента: Начнем с того, что зададим высоту родительского элемента равной нулю. Это важно для того, чтобы далее использовать отступы (padding) для задания соотношения сторон.
2. Использование padding-bottom: Основная хитрость заключается в использовании свойства padding-bottom, значение которого рассчитывается как (высота/ширина) * 100%. Это определяет соотношение сторон, которое мы хотим сохранить. Например, для соотношения 16:9, padding-bottom будет равен 56.25% (то есть 9/16 * 100%).
3. Абсолютное позиционирование дочернего элемента: Затем дочерний элемент,
4. Использование object-fit для изображения: Чтобы предотвратить искажение изображения при его адаптации под размеры блока, добавляем свойство object-fit: cover. Это обеспечит, что изображение всегда будет заполнять блок, сохраняя свои пропорции.
5. : Чтобы кодУпрощение с помощью пользовательских свойств(height/width) на пользовательское свойство --aspect-ratio. Это позволяет легко модифицировать соотношение сторон при необходимости.

Пример кода

Рассмотрим, как это выглядит на практике:

HTML:

<div class="custom-aspect-ratio">
<img src="img.jpg" alt="image description">
</div>

.custom-aspect-ratio {
--aspect-ratio: 16/9; /* Задаем соотношение сторон */
position: relative;
height: 0;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}

.custom-aspect-ratio > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Обеспечиваем сохранение пропорций изображения */
}