Соотношение сторон

Классы aspect-{ширина}x{высота} задают свойство aspect-ratio: браузер вычисляет второй размер элемента из первого. Берите их для изображений, видео, карточек и заглушек, которые должны сохранять форму при любой доступной ширине.

Пример

Квадрат и горизонтальные пропорции

У всех образцов одинаковая ширина, высоту задаёт только класс. Подпись над образцом — класс, который на нём стоит.

HTML

<div class="grid grid-col-2 sm:grid-col-4 gap-3 items-cross-start color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">aspect-1x1</code>
    <div class="w-full aspect-1x1 bg-primary-container border border-primary radius-ui"></div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">aspect-4x3</code>
    <div class="w-full aspect-4x3 bg-primary-container border border-primary radius-ui"></div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">aspect-3x2</code>
    <div class="w-full aspect-3x2 bg-primary-container border border-primary radius-ui"></div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">aspect-16x9</code>
    <div class="w-full aspect-16x9 bg-primary-container border border-primary radius-ui"></div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">aspect-2x1</code>
    <div class="w-full aspect-2x1 bg-primary-container border border-primary radius-ui"></div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">aspect-3x1</code>
    <div class="w-full aspect-3x1 bg-primary-container border border-primary radius-ui"></div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">aspect-4x1</code>
    <div class="w-full aspect-4x1 bg-primary-container border border-primary radius-ui"></div>
  </div>
</div>

Вертикальные пропорции

HTML

<div class="grid grid-col-2 sm:grid-col-4 gap-3 items-cross-start color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">aspect-3x4</code>
    <div class="w-full aspect-3x4 bg-tertiary-container border border-tertiary radius-ui"></div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">aspect-2x3</code>
    <div class="w-full aspect-2x3 bg-tertiary-container border border-tertiary radius-ui"></div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">aspect-1x2</code>
    <div class="w-full aspect-1x2 bg-tertiary-container border border-tertiary radius-ui"></div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">aspect-9x16</code>
    <div class="w-full aspect-9x16 bg-tertiary-container border border-tertiary radius-ui"></div>
  </div>
</div>

Пропорция и ширина экрана

С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину окна просмотра: до ширины sm область квадратная, начиная с sm — 16 : 9.

HTML

<div class="flex flex-col gap-1 color-on-surface">
  <code class="text-1/2 color-on-surface-variant">aspect-1x1 sm:aspect-16x9</code>
  <div class="w-full max-w-g2 aspect-1x1 sm:aspect-16x9 bg-primary-container color-on-primary-container border border-primary radius-ui flex items-center justify-center p-2 text-center">
    Квадрат до ширины sm, от sm — 16 : 9
  </div>
</div>

Классы

Класс	CSS	Значения
`aspect-1x1`	`aspect-ratio: 1 / 1`	—
`aspect-1x2`	`aspect-ratio: 1 / 2`	—
`aspect-2x1`	`aspect-ratio: 2 / 1`	—
`aspect-2x3`	`aspect-ratio: 2 / 3`	—
`aspect-3x1`	`aspect-ratio: 3 / 1`	—
`aspect-3x2`	`aspect-ratio: 3 / 2`	—
`aspect-3x4`	`aspect-ratio: 3 / 4`	—
`aspect-4x1`	`aspect-ratio: 4 / 1`	—
`aspect-4x3`	`aspect-ratio: 4 / 3`	—
`aspect-16x9`	`aspect-ratio: 16 / 9`	—
`aspect-9x16`	`aspect-ratio: 9 / 16`	—

Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:aspect-1x1.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Один размер задан, второй вычисляется

Задайте ширину (например, w-full), а высоту оставьте автоматической — её вычислит браузер. Для изображений и видео добавьте object-cover, чтобы содержимое заполнило область без искажения.

HTML

<img class="w-full aspect-1x1 object-cover" src="avatar.jpg" alt="Аватар">
<video class="w-full aspect-16x9" controls></video>

Выбор пропорции

aspect-1x1 — аватары, иконки, плитки каталога.
aspect-4x3, aspect-3x2 — фотографии в альбомной ориентации.
aspect-16x9 — видео и обложки.
aspect-3x4, aspect-2x3 — портреты, обложки книг.
aspect-9x16 — вертикальное видео.
aspect-2x1, aspect-3x1, aspect-4x1 — баннеры и полосы.

Разная пропорция на разных экранах

HTML

<div class="w-full aspect-1x1 sm:aspect-16x9"></div>

Ограничения

Пропорция не действует, если у элемента заданы и ширина, и высота: aspect-ratio вычисляет только автоматический размер.
Содержимое, которое выше вычисленной высоты, растягивает элемент. Чтобы пропорция сохранялась, добавьте overflow-hidden или min-h-0.
Набор пропорций фиксирован: классов вроде aspect-21x9 нет.

Навигация

Главное

Документация

Содержание

Соотношение сторон

Пример

Квадрат и горизонтальные пропорции

Вертикальные пропорции

Пропорция и ширина экрана

Классы

Применение

Один размер задан, второй вычисляется

Выбор пропорции

Разная пропорция на разных экранах

Ограничения

См. также

Settings