aspect-ratio

Определение и применение

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

Как сохранить пропорции изображения при изменении ширины — в уроке «Размеры блочных элементов в CSS».

Попробуйте значения aspect-ratio

Ширина блока задана, высота auto. Переключайте соотношение сторон и ширину: высота пересчитывается. При auto её определяет содержимое.

Значение свойстваaspect-ratio: auto;aspect-ratio: 1 / 1;aspect-ratio: 16 / 9;aspect-ratio: 4 / 3;

Что меняем

aspect-ratio: auto

HTML и CSS примера

HTML

<div class="stage">
  <div class="demo-target" style="width: 200px">Содержимое</div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  max-width: 100%;
  display: grid;
  place-items: center;
  border: 2px solid #245a85;
  background: #b9d7eb;
  aspect-ratio: auto;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  max-width: 100%;
  display: grid;
  place-items: center;
  border: 2px solid #245a85;
  background: #b9d7eb;
  aspect-ratio: 1 / 1;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  max-width: 100%;
  display: grid;
  place-items: center;
  border: 2px solid #245a85;
  background: #b9d7eb;
  aspect-ratio: 16 / 9;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  max-width: 100%;
  display: grid;
  place-items: center;
  border: 2px solid #245a85;
  background: #b9d7eb;
  aspect-ratio: 4 / 3;
}

Поддержка браузерами

Спецификация: CSS sizing-4

Поддерживается во всех основных браузерах с 2021 года.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.aspect-ratio
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`aspect-ratio`	✓88	✓88	✓89	✓74	✓15	✓88	✓89	✓63	✓15	✓15.0	✓88	✓15
`auto`	✓88	✓88	✓89	✓74	✓15	✓88	✓89	✓63	✓15	✓15.0	✓88	✓15

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

aspect-ratio: auto || <ratio>;

/* Глобальные значения */
aspect-ratio: initial | inherit | unset | revert | revert-layer;

|| позволяет указать одну или обе части в любом порядке. <ratio> — неотрицательное отношение двух чисел, например 16 / 9; у одного числа знаменатель равен 1.

JavaScript синтаксис:

JavaScript

element.style.aspectRatio = "16 / 9";

Начальное значение свойства

auto.

Значения свойства

Значения aspect-ratio
Значение	Описание
`auto`	У обычного блока предпочтительное соотношение не задано. У изображения используется его собственное соотношение сторон. Начальное значение.
`<ratio>`	Задаёт отношение ширины к высоте: `1` означает квадрат, `3 / 4` — вертикальную область. Нулевое или бесконечное отношение не задаёт полезной пропорции и обрабатывается как `auto`.
`auto <ratio>`	Для изображения используется указанное отношение, пока собственное неизвестно; после загрузки — собственное. У обычного блока работает указанное отношение.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `aspect-ratio` устанавливает его начальное значение свойства.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Когда пропорция влияет на размер

Хотя бы один размер должен рассчитываться автоматически. При width: 240px; height: auto; aspect-ratio: 3 / 2 ожидаемая высота — 160px. Если задать и ширину, и высоту явно, соотношение не исправит их. Ограничения min-width, max-height и минимальный размер содержимого также могут изменить результат.

Свойство задаёт пропорции области элемента, а object-fit определяет, как картинка заполняет эту область. Для квадратной миниатюры используйте aspect-ratio: 1 вместе с object-fit: cover. При явно заданном отношении расчёт учитывает модель box-sizing; собственное отношение изображения относится к его содержимому.

Спецификация

CSS Box Sizing — aspect-ratio.

Наследуется

Нет.

Анимируемое

Да, как отношение двух чисел. Переходы с участием auto не дают обычной плавной интерполяции числовой пропорции.

Примеры, попробуйте сами

Обложка с изменяемыми пропорциями

Сузьте результат: ширина обложки уменьшится вместе с высотой. Замените 16 / 9 на 1 или 3 / 4. Затем задайте height: 140px: при двух явных размерах пропорция перестанет определять высоту.

base.css

CSS

body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.cover {
    display: grid;
    place-items: center;
    background: #dbeafe;
    border: 2px solid #2563eb;
    padding: 1rem;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Обложка с изменяемыми пропорциями</title>
  </head>
  <body>
    <div class="cover">Альбом прогулок Тони</div>
  </body>
</html>

style.css

CSS

.cover {
    width: 100%;
    max-width: 30rem;
    height: auto;
    aspect-ratio: 16 / 9;
}