<ratio>
Baseline 广泛可用 *
<ratio> CSS 数据类型描述了两个值之间的比例关系。它主要表示宽高比，即宽度与高度的关系。例如，<ratio> 在 @media 媒体查询中用作 aspect-ratio 媒体特性值，在 @container 容器查询中用作 aspect-ratio 大小特性值，以及用作 CSS aspect-ratio 属性的值。
语法
<ratio> 数据类型是 <number> 后跟一个正斜杠（'/'，Unicode U+002F SOLIDUS），再后跟第二个 <number>。两个数字都必须是正数。斜杠前后可以有空格。第一个数字表示宽度，第二个数字表示高度。此外，也可以使用单个 <number> 作为值。
两个比例通过它们的商的数值进行比较。例如，16/16 小于 16/9，因为前者解析为 1，而后者解析为 1.7。这意味着高屏的宽高比小于宽屏的，纵向图片的宽高比小于横向图片的。
常见宽高比
| 比率 | 用法 | |
|---|---|---|
4/3 或 1.33333 |
 |
二十世纪的传统电视格式。 |
16/9 或 1.7777778 |
 |
现代“宽屏”电视格式。 |
185/100 或 1.85 |
 |
自 20 世纪 60 年代以来最常见的电影格式。 |
239/100 或 2.39 |
 |
“宽屏”，变形电影格式。 |
正式语法
<ratio> =
<number [0,∞]> [ / <number [0,∞]> ]?
示例
在媒体查询中使用
css
@media screen and (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 级 # 比率值 |
浏览器兼容性
加载中…
另见
aspect-ratio媒体描述符- 理解纵横比
- CSS 容器查询指南
- 使用容器大小和样式查询指南
- CSS 媒体查询模块
- CSS 限制模块
- CSS 盒模型尺寸模块
- CSS 值和单位模块