<ratio>

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

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

Тип данных <ratio> CSS данных описывает пропорциональные отношения между шириной и высотой. Он используется в качестве значения для aspect-ratio медиа-функции в @media медиа-запросах, aspect-ratio параметра размера в @container запросах по контейнерам и в качестве значения для свойства CSS aspect-ratio.

Синтаксис

Тип данных <ratio> — это <number>, за которым следует обратный слэш ('/', Unicode U+002F SOLIDUS) и второе <number>. Обе цифры должны быть положительными. Пробелы перед и после слэша необязательны. Первое число представляет ширину, а второе — высоту. Кроме того, допускается использование одного <number> в качестве значения.

Общие соотношения сторон

A rectangle that is three units tall and four units wide

A rectangle that is nine units tall and sixteen units wide

Соотношение		Использование
`4/3` или `1.33333`		Традиционный формат телевизора в двадцатом веке.
`16/9` или `1.7777778`		Современный формат телевизора «панорамный вид».
`185/100` или `1.85`		Наиболее распространённый формат кино с 1960-х годов.
`239/100` или `2.39`		«Панорамный вид», анаморфный формат кино.

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

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

Примеры

Использование в медиа-запросе

@media screen and (min-aspect-ratio: 16/9) {
  /* … */
}

Использование в запросе размера контейнера

@container (aspect-ratio > 1) and (width < 20em) {
  /* … */
}

Использование в качестве значения свойства CSS

.square {
  aspect-ratio: 1 / 1;
}
.circle {
  aspect-ratio: 1;
  border-radius: 50%;
}
.portrait {
  aspect-ratio: 5 / 7;
}

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

Спецификация
Модуль CSS Values and Units Level 4 # ratio-value

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`ratio`	3	12	3.5	9.5	5	18	4	14	4.2	1.0	≤37
`number_value`	Нет	Нет	70	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет

См. также

© 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/ratio