aspect-ratio: задаём пропорции блока без JS и лишних обёрток (CSS)

Когда нужно, чтобы блок сохранял пропорции (например, карточка товара, превью видео, сетка галереи), раньше часто делали костыли: вставляли пустой div‑обёртку, задавали ей padding-top в процентах или писали JS, который пересчитывал высоту. Сейчас всё это можно сделать одной строкой CSS — через свойство aspect-ratio.

Что такое aspect-ratio

aspect-ratio задаёт соотношение ширины к высоте блока. Например, 16/9 — это «шестнадцать к девяти», как у большинства видео. Браузер сам подстроит высоту блока под его ширину, чтобы пропорции не ломались при изменении размера экрана.

Синтаксис простой:

.box {
  aspect-ratio: 16 / 9;
}

Можно писать и десятичной дробью: aspect-ratio: 1.7778; — это то же самое, что 16/9. Но дробью удобнее: сразу видно, какие пропорции вы имеете в виду.

Где это реально полезно

• Видео и превью роликов. Чтобы блок под видео всегда выглядел как «киношный» прямоугольник.
• Карточки товаров и постов. Чтобы все карточки были одинаковой формы, даже если контент внутри разной длины.
• Сетки с картинками. Чтобы сетка не «прыгала», когда картинки подгружаются.
• Иконки и логотипы. Если нужно, чтобы они не сплющивались на узких экранах.

Раньше для этого делали так:

<div class="card-wrapper">
  <div class="card"></div>
</div>

.card-wrapper {
  position: relative;
  padding-top: 56.25%; /* 9/16 * 100 = 56.25% */
}
.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Это работало, но требовало лишней обёртки и «магических» процентов. Теперь можно просто:

.card {
  aspect-ratio: 16 / 9;
}

Примеры

Видео-блок 16:9

<div class="video-box"></div>

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

Блок будет всегда сохранять пропорции 16:9, независимо от ширины родителя.

Квадратные карточки

.card {
  aspect-ratio: 1 / 1;
}

Идеально для сетки 3×3, где все карточки — квадраты.

Вертикальные карточки (например, для постов)

.post-card {
  aspect-ratio: 3 / 4;
}

Как это работает вместе с другими свойствами

С width и max-width

Чаще всего aspect-ratio используют вместе с ограничением ширины:

.box {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
}

На больших экранах блок будет не шире 600 px, на маленьких — займёт всю доступную ширину, но пропорции останутся.

С Flex и Grid

В Flexbox и Grid aspect-ratio тоже работает предсказуемо: элемент с заданным соотношением сохраняет пропорции, а соседние элементы подстраиваются.

Пример Grid-сетки с квадратными ячейками:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
 
.grid-item {
  aspect-ratio: 1 / 1;
  background: #eee;
}

С контентом внутри

Если внутри блока много текста или картинок, он может «вылезать» за границы. Тут важно помнить: aspect-ratio задаёт пропорции самого блока, но не ограничивает контент. Если нужно, добавьте overflow:

.box {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

Или используйте object-fit для картинок и видео:

.box img,
.box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Частые ошибки и подводные камни

• Забывают задать ширину. Если у блока нет ширины (и нет родителя, который её задаёт), aspect-ratio может не сработать так, как ожидается. Чаще всего ставят width: 100% или max-width.
• Контент растягивает блок. Пропорции задаются для самого элемента, а не для его содержимого. Если контента много, блок станет выше, и пропорции нарушатся.
• Смешивают старые хаки и aspect-ratio. Не нужно одновременно использовать padding-top для пропорций и aspect-ratio. Оставьте только aspect-ratio, это проще и понятнее.

Совместимость и когда не сработает

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

Полный пример: сетка карточек с видео

<section class="cards">
  <article class="card">
    <div class="preview"></div>
    <h3>Заголовок карточки</h3>
    <p>Описание</p>
  </article>
  <!-- ещё карточки -->
</section>

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
 
.card .preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #222;
  margin-bottom: 12px;
}
 
.card h3,
.card p {
  margin: 0 0 8px;
}

Здесь .preview всегда будет сохранять пропорции 16:9, а сетка сама подстроится под размер экрана.

Когда лучше не использовать

Иногда пропорции вообще не нужны: например, для текстовых блоков, форм, таблиц. В таких случаях aspect-ratio только усложнит верстку. Используйте его там, где важно сохранить форму — картинки, видео, карточки, иконки.