Раннее мы уже касались вопроса создания изображений, сохраняющих свои пропорции, с помощью CSS и HTML.

1. “Пропорции для img”,
2. “Как управлять размерами изображения с помощью CSS?”.

Сегодня мы разберем еще один простой и достаточно эффективный метод создания адаптивной картинки с определенными пропорциями. Этот метод, использующий пользовательские переменные, известен под именем “padding hack”.

Итак, пока все ждут появления поддержки CSS-свойства aspect-ratio в различных браузерах, можно сделать следующее:

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

HTML

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

CSS

.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;
}

Спасибо за внимание.

Написано по материалам статьи Sebastiano Guerriero “Aspect Ratio in CSS”.