Как сделать aspect-ratio на основе переменных?

Для создания аспектного соотношения с использованием переменных в CSS, можно воспользоваться следующим подходом:

1. Создайте контейнер, в котором будет располагаться элемент, для которого нужно задать аспектное соотношение. Например:

<div class="aspect-ratio-container">
  <!-- Здесь будет располагаться элемент -->
</div>

2. Определите переменные для ширины и высоты контейнера. Например:

:root {
  --width: 16;
  --height: 9;
}

3. Установите для контейнера относительное позиционирование и задайте ему ширину в процентах на основе переменных. Также установите overflow: hidden, чтобы обрезать содержимое, если оно выходит за пределы контейнера. Например:

.aspect-ratio-container {
  position: relative;
  width: calc(100% * var(--width) / var(--height));
  overflow: hidden;
}

4. Найдите элемент внутри контейнера, для которого нужно задать аспектное соотношение, и установите ему абсолютное позиционирование, а также задайте ему ширину и высоту в 100%:

.aspect-ratio-container > .element {
  position: absolute;
  width: 100%;
  height: 100%;
}

5. Для поддержки пропорционального изменения размера элемента при изменении размеров окна браузера или родительского контейнера, можно использовать псевдоэлемент с псевдоклассом ::before (либо ::after). Задайте псевдоэлементу относительное позиционирование, а также установите в качестве значения для относительной ширины и высоты соотношение переменных. Например:

.aspect-ratio-container::before {
  content: '';
  display: block;
  padding-top: calc(100% * var(--height) / var(--width));
}

Таким образом, при использовании указанных выше ширин и высот, элемент внутри контейнера будет иметь аспектное соотношение 16:9. При изменении значений переменных --width и --height, аспектное соотношение будет автоматически пересчитываться и применяться к элементу.