Как установить соотношение сторон в CSS с помощью настраиваемых свойств.
Пока мы ждем, пока свойство соотношения сторон не будет поддерживаться другими браузерами, вот трюк 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;
}
Демо
Вот живая демонстрация: