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

padding-top/bottom в %

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

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

Например:

1x1 aspect ratio = 1 / 1 * 100% = padding-top: 100%
4x3 aspect ratio = 3 / 4 * 100% = padding-top: 75%
16x9 aspect ratio = 9 / 16 * 100% = padding-top: 56.25%

В некоторых случаях, проценты округляли до сотых:
3x2 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позиционированы. А значит нужен другой вариант пропорционального бокса.

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 просто перестанет работать. Таким образом, они ничего не заденут по случайности.

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