В ожидании aspect-ratio: все «хаки» для пропорциональных боксов

В ожидании широкой поддержки свойства aspect‑ratio предлагаю вам вспомнить несколько вариаций «хака», которые мы все еще можем использовать, чтобы достичь такого же поведения с обычными боксами.

padding-top/bottom в %

Соблюдения соотношения сторон без aspect-ratio можно было достичь задав боксу с нулевой высотой padding-top или padding‑bottom в %. Процентное соотношение рассчитывалось по формуле:

высота / ширину * 100%

Например:
1:1 aspect ratio = 1 / 1 * 100% = padding‑top: 100%
4:3 aspect ratio = 3 / 4 * 100% = padding‑top: 75%
16:9 aspect ratio = 9 / 16 * 100% = padding‑top: 56.25%

В некоторых случаях, проценты округляли до сотых:
3:2 aspect ratio = 2 / 3 * 100% = padding‑top: 66.67% (66.66666666666667%)

Видимо, людям не нравилось писать 16 значные значения свойства. Что приводит нас к

padding‑top/bottom + функция calc()

.aspect-ratio-box {   padding-bottom: calc(120 / 327 * 100%);   height: 0; }

И красиво, и немного намекает на то, что происходит, людям не знакомым с хаком.

Так как высота бокса была равной нулю, чтобы разместить в нем что-то (заголовок, например) нам было нужно использовать абсолютное позиционирование. Из-за чего он не был защищен от переполнения контентом.

Так же, вы могли столкнутся с еще одной причиной по которой мы не могли использовать данный способ. Вот хороший пример:

Все проекты этого блока это по сути article с заголовком внутри. Изображения заданы через background‑image. Проекты также должны быть кликабельны. Мы можем обернуть все содержимое 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

Какой же способ использовать в работе? Мне кажется, мы можем начать использовать aspect‑ratio и подстраховаться директивой @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 просто перестанет работать. Таким образом, они ничего не заденут по случайности.

А со временем, когда поддержка будет более распространена — мы просто удалим правило.