aspect-ratio

aspect-ratio — CSS-свойство, задающее желаемое соотношение ширины и высоты элемента; браузер автоматически вычисляет вторую размерность из первой.

Зачем нужно

До aspect-ratio для создания блока с фиксированным соотношением сторон использовался хак с padding-top: 56.25% (для 16:9). Теперь одно свойство заменяет этот трюк и работает более интуитивно. Критически важно для адаптивных видео, карточек с изображениями, аватаров и иконок.

Где используется

  • Видео-плееры (16:9, 4:3)
  • Квадратные аватары и превью изображений (1:1)
  • Карточки с одинаковой высотой
  • Placeholder для изображений при lazy loading

Синтаксис

.element {
  aspect-ratio: 16 / 9;  /* ширина/высота */
  aspect-ratio: 1;        /* эквивалент 1/1 — квадрат */
  aspect-ratio: 4 / 3;
  aspect-ratio: auto;     /* по умолчанию — не задаётся */
}

Примеры

Адаптивное видео 16:9

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: black;
}

.video-wrapper iframe,
.video-wrapper video {
  width: 100%;
  height: 100%;
  display: block;
}

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>

Квадратные карточки изображений

.card__image {
  width: 100%;
  aspect-ratio: 1;      /* квадрат */
  object-fit: cover;
  border-radius: 8px;
}

<article class="card">
  <img class="card__image" src="photo.jpg" alt="Фото">
  <h3>Заголовок</h3>
</article>

Аватар

.avatar {
  width: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

Skeleton-placeholder

.skeleton-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

Поведение при переполнении содержимым

Если контент превышает вычисленную высоту, элемент растянется:

.card {
  aspect-ratio: 1;
  /* При большом контенте высота вырастет выше квадрата */
}

/* Чтобы сохранить соотношение — ограничьте overflow */
.card {
  aspect-ratio: 1;
  overflow: hidden;
}

aspect-ratio с min/max ограничениями

.thumbnail {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 16 / 9;
  /* Ширина от 0 до 400px, высота пропорциональна */
}

Частые ошибки

  1. aspect-ratio без width или height — хотя бы одно измерение должно быть задано (явно или через родителя); при width: auto; height: auto эффекта нет
  2. Ожидание, что aspect-ratio перезапишет height — если оба width и height заданы явно, aspect-ratio не имеет эффекта
  3. Устаревший padding-hack — padding-top: 56.25% больше не нужен в современных проектах

Поддержка браузеров

Поддерживается в Chrome 88+, Firefox 89+, Safari 15+. Для более старых браузеров используйте padding-hack как fallback.

Связанные темы

Ресурсы