# Свойство aspect-ratio

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

## Синтаксис

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

## Значения

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

## Пример

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

`<p> <button>Click</button> </p>` `button { aspect-ratio: auto; background-color: #9DDFA4; padding: 1em; }`

:

## Пример

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

`<p> <button>Click</button> </p>` `button { aspect-ratio: 1/2; background-color: #9DDFA4; padding: 1em; }`

:

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

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

← →
↑
en ru