🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Widely Available» с 2024-03-20

CSS-свойство aspect-ratio позволяет задавать соотношение ширины к высоте элемента. Оно особенно полезно для адаптивных изображений, видео и блоков, чтобы сохранить нужный формат при изменениях размера окна или контейнера. Свойство облегчает создание резиновых макетов без лишнего кода.

Пример использования:

.box {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #ccc;
}

Использование aspect-ratio помогает автоматически сохранять пропорции, делая дизайн более гибким. Это лучше, чем для каждого случая писать padding-bottom или управлять высотой вручную, что часто сложно и не так удобно.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.