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

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2021 года.

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

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

Попробовать

Синтаксис

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>. Если оба значения заданы, и элемент является элементом с заменой, таким как <img>, то указанное соотношение используется до загрузки содержимого. После загрузки содержимого применяется значение auto, поэтому используется внутреннее соотношение сторон загруженного содержимого.

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

Значения

auto: Элементы с заменой с внутренним соотношением сторон используют это соотношение, в противном случае у блока нет предпочтительного соотношения сторон. Расчёты размеров, связанные с внутренним соотношением сторон, всегда выполняются с размерами области содержимого.
<ratio>: Предпочтительное соотношение сторон блока — это заданное соотношение width / height. Если height и предшествующий символ косой черты опущены, height по умолчанию равно 1. Расчёты размеров, связанные с предпочтительным соотношением сторон, выполняются с размерами блока, указанными box-sizing.
auto && <ratio>: Когда оба auto и <ratio> заданы вместе, auto используется, если элемент является элементом с заменой с естественным соотношением сторон, например, <img> элемент. В противном случае заданное соотношение width / height используется в качестве предпочтительного соотношения сторон.

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

Начальное значение	`auto`
Применяется к	всем элементам, кроме блоков inline, внутренних блоков ruby или таблиц
Наследуется	нет
Вычисленное значение	как задано
Тип анимации	по типу вычисленного значения

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

aspect-ratio = 
  auto     ||
  <ratio>  

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

Примеры

Исследование влияния соотношения сторон при фиксированной ширине

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

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 Box Sizing Module Level 4 # соотношение сторон

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`aspect-ratio`	88	88	89	74	15	88	89	63	15	15.0	88
`auto`	88	88	89	74	15	88	89	63	15	15.0	88

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio