Свойство CSS `aspect-ratio`

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

Попробуйте

aspect-ratio: auto;

aspect-ratio: 1 / 1;

aspect-ratio: 16 / 9;

aspect-ratio: 0.5;

<section id="default-example">
  <img
    class="transition-all"
    height="640"
    id="example-element"
    src="/shared-assets/images/examples/plumeria.jpg"
    width="466" />
</section>

#example-element {
  height: 100%;
  width: auto;
}

Синтаксис

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* fallback to 'auto' for replaced elements */
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

Значения

Это свойство задаётся одним или обоими ключевыми словами auto и значением <ratio>.

auto

Замещаемые элементы с собственным соотношением сторон используют это соотношение, в противном случае предпочтительное соотношение сторон блока не задано. При вычислении размеров с учётом собственного соотношения сторон всегда используются размеры области содержимого.

<ratio>

Предпочтительное соотношение сторон блока — это заданное соотношение width / height. Если height и предшествующий символ косой черты опущены, значение height по умолчанию равно 1. При вычислении размеров с учётом предпочтительного соотношения сторон используются размеры блока, заданные свойством box-sizing.

auto && <ratio>

Если заданы одновременно auto и <ratio>, используется auto, когда элемент является замещаемым и имеет естественное соотношение сторон, например элемент <img>. В противном случае в качестве предпочтительного соотношения сторон используется заданное соотношение width / height.

Описание

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

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

Это свойство задаётся одним или обоими ключевыми словами auto и значением <ratio>. Если заданы оба значения и элемент является замещаемым элементом, например <img>, заданное соотношение используется до загрузки содержимого. После загрузки содержимого применяется значение auto, поэтому используется собственное соотношение сторон загруженного содержимого.

Если элемент не является замещаемым, используется заданное значение ratio.

Формальное определение

Формальный синтаксис

aspect-ratio = 
  auto ||
  <ratio>

<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?

Примеры

Изучение влияния aspect-ratio при фиксированной ширине

В этом примере ширина элементов <div> задана как 100px, а высота — как auto. Поскольку ширина здесь фиксирована, свойство aspect-ratio влияет только на высоту элементов <div>, поддерживая заданное соотношение ширины и высоты.

<div>1/1</div>
<div>0.5</div>
<div>1</div>
<div>1/0.5</div>
<div>16/9</div>

div {
  display: inline-flex;
  background-color: lime;
  justify-content: center;
}

div {
  width: 100px;
  height: auto;
}
div:nth-child(1) {
  aspect-ratio: 1/1;
}
div:nth-child(2) {
  aspect-ratio: 0.5;
}
div:nth-child(3) {
  aspect-ratio: 1;
}
div:nth-child(4) {
  aspect-ratio: 1/0.5;
}
div:nth-child(5) {
  aspect-ratio: 16/9;
}

Использование естественного соотношения сторон в качестве запасного варианта

В этом примере используются два элемента <img>. У первого элемента атрибут src не указывает на файл изображения.

<img src="" /> <img src="plumeria.jpg" />

Следующий код задаёт 3/2 в качестве предпочтительного соотношения сторон, а auto — в качестве запасного варианта.

img {
  display: inline;
  width: 200px;
  border: 2px dashed red;
  background-color: lime;
  vertical-align: top;

  aspect-ratio: 3/2 auto;
}

Обратите внимание: первое изображение без замещающего содержимого сохраняет соотношение сторон 3/2, а второе изображение после загрузки содержимого использует естественное соотношение сторон изображения.

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

Совместимость с браузерами

См. также

• Понимание соотношений сторон
• Соотношение сторон изображений: предотвращение рывков при загрузке
• Разработка единицы соотношения сторон для CSS
• Почему снова важно задавать высоту и ширину изображений