Свойство aspect-ratio - соотношение сторон элемента в CSS
Свойство 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,
которое масштабирует элементы