Свойство aspect-ratio: пропорции блока
Как сохранить пропорции карточки или области медиа без ручного расчёта высоты.
Как это работает
aspect-ratio задаёт предпочтительное отношение ширины к высоте. Оно участвует в вычислении автоматического размера: если ширина известна, а высота auto, браузер может вывести высоту из пропорции. Это удобно для превью и пустой области под будущий контент.
Если и ширина, и высота заданы жёстко, предпочтительная пропорция не обязана изменить результат. Реальное содержимое и минимальные размеры тоже могут влиять на геометрию. Для картинки со своей областью часто сочетают aspect-ratio и object-fit.
Пример в интерфейсе
.preview { width: min(100%, 360px); aspect-ratio: 16 / 9; background: #eaf4ee; display: grid; place-items: center; border: 1px solid #bdd5c7; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| 16 / 9 | Широкая прямоугольная область. |
| 1 | Квадратное предпочтительное соотношение. |
| auto | Автоматическое поведение, включая естественные пропорции медиа. |
На что обратить внимание
Не превращайте текстовую карточку в жёстко обрезанный прямоугольник ради одинаковой высоты. При увеличении шрифта содержимое должно оставаться доступным.
Проверьте на практике
Измените пропорцию с 16/9 на 1 и уменьшите ширину. Высота должна пересчитываться без отдельных медиазапросов.
Связанные темы: object-fit, width.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.