<ratio>

<ratio> CSS 数据类型 描述了宽度和高度之间的比例关系。它用作 @media 媒体查询中的 aspect-ratio 媒体特性、@container 容器查询中的 aspect-ratio 大小特性以及 CSS aspect-ratio 属性的值。

语法

<ratio> 数据类型是一个 <number> 后跟一个正斜杠（'/'，Unicode U+002F SOLIDUS）和第二个 <number>。这两个数字必须为正数。斜杠前后可以有空格。第一个数字表示宽度，第二个数字表示高度。此外，允许使用单个 <number> 作为值。

常见纵横比

比例 用法
4/3 或 1.33333 A rectangle that is three units tall and four units wide 20 世纪传统的电视格式。
16/9 或 1.7777778 A rectangle that is nine units tall and sixteen units wide 现代“宽屏”电视格式。
185/100 或 1.85 A rectangle that is 1 unit tall and 1.85 units wide 自 1960 年代以来最常见的电影格式。
239/100 或 2.39 A rectangle that is 1 unit tall and 2.39 units wide “宽屏”，变形电影格式。

正式语法

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

示例

在媒体查询中使用

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

在 @container 大小查询中使用

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

用作 CSS 属性值

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

规范

规范
CSS 值和单位模块 第 4 级
# ratio-value

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅