CSS aspect-ratio 属性
更多“亲自试一试”示例如下。
定义和用法
The aspect-ratio 属性允许您定义元素的宽度和高度之间的比例。
如果设置了 aspect-ratio 和 width 属性，则高度将按照定义的纵横比进行调整。
要更好地理解 aspect-ratio 属性，查看演示。
提示：在响应式布局中使用 aspect-ratio 属性，在这些布局中，元素的大小经常变化，而您希望保持宽度和高度之间的比例。
| 默认值 | auto |
|---|---|
| 继承 | 否 |
| 可动画 | 是。 了解有关可动画的信息 试一试 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.aspectRatio="16/9" 试一试 |
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| aspect-ratio | 88 | 88 | 89 | 15 | 74 |
CSS 语法
aspect-ratio: number/number|initial|inherit;
属性值
| 属性值 | 描述 | 演示 |
|---|---|---|
| number | 第一个数字指定纵横比中宽度的数字。 | 演示 ❯ |
| number | 第二个数字指定纵横比中高度的数字。可选。如果未设置，则高度的数字默认为 1。 | 演示 ❯ |
| initial | 将此属性设置为其默认值。 了解有关initial的信息 | |
| inherit | 从其父元素继承此属性。 了解有关inherit的信息 |
更多示例
示例
如果 div 元素应该大小可变，则 aspect-ratio 属性非常适合控制 div 元素的纵横比。这在图像库中可能适用，当您希望 div 元素大小灵活以在所有设备上看起来都很好时，但您也希望保留图像的宽度和高度之间的比例。
#container > div {
aspect-ratio: 3/2;
}
相关页面
CSS 教程：CSS 网格布局模块
CSS object-fit 属性：CSS Object-fit 属性
CSS object-position 属性：CSS Object-position 属性
