Свойство aspect-ratio

Свойство aspect-ratio задает выравнивание элементов вдоль поперечной оси для flex блоков и по горизонтальной оси для гридов. Применяется к родительскому элементу.

Синтаксис

cssселектор {
  aspect-ratio: auto или соотношение;
}

Значения

Значение	Описание
`auto`	У элемента нет предпочитаемого соотношения сторон и браузер устанавливает его автоматически, исходя из ширины и высоты элемента.
`соотношение`	Соотношение записывается в виде `16/9`, здесь первое число это ширина, а второе число - высота. Если какое-то значение не указано, то оно считается равным `1`. Также некоторые соотношения допустимо записывать одним числом. Например, `2/1` можно записать как `0.5`, это даст одинаковый результат.
`auto && соотношение`	Если соотношение сторон идёт вместе с ключевым словом `auto` (пример: `auto` `1/2`), то будет выбираться указанное соотношение, но для заменяемых элементов (таких как изображения и видео) с собственным соотношением будет использоваться только оно.

Пример

Давайте установим для кнопки автоматическое соотношение сторон:

html<p>
  <button>Click</button>
</p>

cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Пример

А теперь давайте зададим соотношение сторон для кнопки как 1/2:

html<p>
  <button>Click</button>
</p>

cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Смотрите также

свойство object-fit,
которое масштабирует элементы