В ожидании широкой поддержки свойства aspectratio предлагаю вам вспомнить несколько вариаций "хака", которые мы все еще можем использовать, чтобы достичь такого же поведения с обычными боксами.
padding-top/bottom в %
Соблюдения соотношения сторон без aspect-ratio можно было достичь задав боксу с нулевой высотой padding-top или paddingbottom в %. Процентное соотношение рассчитывалось по формуле:
высота/ширину * 100%
Например:
1:1 aspect ratio = 1 / 1 * 100% = paddingtop:100%
4:3 aspect ratio = 3 / 4 * 100% = paddingtop:75%
16:9 aspect ratio = 9 / 16 * 100% = paddingtop:56.25%
В некоторых случаях, проценты округляли до сотых:
3:2 aspect ratio = 2 / 3 * 100% = paddingtop:66.67%
(66.66666666666667%)
Видимо, людям не нравилось писать 16 значные значения свойства. Что приводит нас к
paddingtop/bottom + функция calc()
.aspect-ratio-box { padding-bottom: calc(120 / 327 * 100%); height: 0;}
И красиво, и немного намекает на то, что происходит, людям не знакомым с хаком.
Так как высота бокса была равной нулю, чтобы разместить в нем что-то (заголовок, например) нам было нужно использовать абсолютное позиционирование. Из-за чего он не был защищен от переполнения контентом.
Так же, вы могли столкнутся с еще одной причиной по которой мы не могли использовать данный способ. Вот хороший пример:
Все проекты этого блока это по сути article с заголовком внутри. Изображения заданы через backgroundimage. Проекты также должны быть кликабельны. Мы можем обернуть все содержимое article в ссылку (в данном случае это не будет проблемой). Однако если проектам захотят добавить описание у нас будет проблема с доступностью. Скринридер прочитает все что вложено в ссылку и заголовок и описание. Решение есть и заключается в том, чтобы положить ссылку в заголовок и растянуть её область клика через псевдоэлемент. Но для этого нам нужно чтобы заголовки не были абсолютно cпозиционированы. А значит нужен другой вариант пропорционального бокса.
Блок лендинга Loopstudio из frontendmentor.io
padding-top/bottom для ::before
Следующий способ заключался в том, чтобы задать внутренний отступ в %уже для псевдоэлемента со значением float:left; Вот так:
.aspect-ratio-box { display: flow-root;/* Нужно чтобы контейнер не схлопывался. */}.aspect-ratio-box::before { content: ""; float: left; padding-bottom: calc(120 / 327 * 100%);}
Для более широкой поддержки по сравнению с flow-root (т.е. для браузеров~ до середины 2017 года), в качестве альтернативы, для контейнера вы могли использовать свойство column-count:
.aspect-ratio-box { column-count: 1;/* Пуленепробиваемый clearfix */}.aspect-ratio-box::before { content: ""; float: left; padding-bottom: calc(120 / 327 * 100%);}
Вариант с flexbox
display:flex; изменит направление потока документа с обычного, на горизонтальное слева направо:
.aspect-ratio-box { display: flex;/* предусмотрительно оставленный комментарий о том, *//* что свойство flex как и направление главной оси *//* убирать и менять нельзя */}.aspect-ratio-box::before { content: ""; padding-bottom: calc(120 / 327 * 100%);}
Помните, что последние две вариации все так же не позволяют вам добавлять внутренние отступы контейнеру. Если Вам нужны отступы их придется добавлять дочерним боксам.
Что дальше? @supports not
Какой же способ использовать в работе? Мне кажется, мы можем начать использовать aspectratio и подстраховаться директивой @supports с оператором not:
.aspect-ratio-box { aspect-ratio: 327 / 120;}@supports not (aspect-ratio: 1 / 1) {/* если браузер НЕ поддерживает свойство, то *//* применить стили внутри */ .aspect-ratio-box { column-count: 1; } .aspect-ratio-box::before { content: ""; float: left; padding-bottom: calc(120 / 327 * 100%); }}
Данный способ является самым надежным.
Если комуто работающему с вашим CSS понадобится как-то
спозиционировать заголовок они смогут сделать это с помощью
флексбокса и внешних отступов со значением auto.
float просто перестанет работать. Таким образом, они ничего не
заденут по случайности.
А со временем, когда поддержка будет более распространена мы просто удалим правило.
