aspect-ratio
Соотношение ширины и высоты: недостающий размер браузер вычисляет сам.
Синтаксис
aspect-ratio: width / height;Значения
| Параметр | Тип | Описание |
|---|---|---|
| w / h | ratio | Соотношение: `16 / 9`, `4 / 3`. |
| number | number | То же одним числом: `1` — квадрат. |
| auto | keyword | Естественное соотношение элемента (у картинок). |
Примеры
Блок с пропорциями видео и квадрат:
<style>
.video { aspect-ratio: 16 / 9; background: black; color: white; width: 100%; max-width: 320px; }
.square { aspect-ratio: 1; width: 80px; background: coral; }
</style>
<div class="video">16 / 9</div>
<p></p>
<div class="square"></div>Примечания
Вместе с object-fit: cover даёт картинкам разного размера одинаковую форму, как в сетке товаров. Если заданы и width, и height, aspect-ratio игнорируется.
См. также
- object-fit — Как картинка `<img>` или `<video>` вписывается в размеры элемента.
- width — Ширина элемента.
- height — Высота элемента.
Вопросы и ответы по теме
В учебнике
- Адаптивные изображения — Как картинки подстраиваются под экран — max-width, aspect-ratio, object-fit, атрибуты srcset и sizes, элемент picture.