Как установить соотношение сторон в CSS

CSS3 03.09.2021

Как установить соотношение сторон в CSS с помощью настраиваемых свойств.

Пока мы ждем, пока свойство соотношения сторон (caniuse.com/mdn-css_properties_aspect-ratio) не будет поддерживаться другими браузерами, вот трюк CSS (также известный как «хак с заполнением») для установки соотношения сторон элемента!

Вот как это работает: установите высоту родительского элемента равной 0, а нижний отступ равным (высота / ширина) * 100% от желаемого соотношения. Дочерний элемент должен находиться в абсолютном положении и унаследовать размер родительского элемента. Наконец, мы добавляем «обложку», соответствующую объекту, чтобы предотвратить искажение изображения. Используйте настраиваемое свойство, чтобы упростить настройку соотношения.

HTML:


<div class="custom-aspect-ratio">
 <img src="assets/img/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;
}