Тип CSS `<ratio>`

<ratio> — это CSS тип данных, описывающий пропорциональное соотношение двух значений. Чаще всего он представляет соотношение сторон, которое связывает ширину с высотой. Например, <ratio> используется в качестве значения для медиахарактеристики aspect-ratio в медиазапросах @media, характеристики размера aspect-ratio в контейнерных запросах @container, а также в качестве значения свойства CSS aspect-ratio.

Синтаксис

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

Два соотношения сравниваются по числовым значениям частных. Например, 16/16 меньше 16/9, поскольку первое разрешается в 1, а второе — в 1,7. Это означает, что соотношение сторон высокого экрана меньше, чем у широкого, а у портретных изображений соотношение сторон меньше, чем у альбомных.

Распространённые соотношения сторон

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

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

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

Примеры

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

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

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

@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;
}

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

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

См. также

• медиадескриптор aspect-ratio
• Понимание соотношений сторон
• руководство по контейнерным запросам CSS
• руководство по использованию запросов размера и стиля контейнера
• модуль медиазапросов CSS
• модуль изоляции CSS
• модуль модели размеров блока CSS
• модуль значений и единиц CSS