CSS aspect-ratio 属性
更多“自己尝试”的例子见下文。
定义和用法
aspect-ratio 属性允许您定义元素的宽度和高度之间的比例。
如果设置了 aspect-ratio 和 width 属性，高度将遵循定义的纵横比。
为了更好地理解 aspect-ratio 属性，请查看演示。
提示：在响应式布局中使用 aspect-ratio 属性，其中元素的大小经常变化，并且您希望保持宽度和高度之间的比例。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| aspect-ratio | 88 | 88 | 89 | 15 | 74 |
CSS 语法
aspect-ratio: 数字/数字|initial|inherit;
属性值
| 属性值 | 描述 | 演示 |
|---|---|---|
| 数字 | 第一个数字指定纵横比中宽度的数字。 | 演示 ❯ |
| 数字 | 第二个数字指定纵横比中高度的数字。可选。如果未设置，则高度的数字默认为 1。 | 演示 ❯ |
| initial | 将此属性设置为其默认值。阅读关于initial | |
| inherit | 从其父元素继承此属性。阅读关于inherit |
更多示例
示例
aspect-ratio 属性非常适合控制 div 元素在 div 元素大小可变时的纵横比。例如，在图像库中，您希望 div 元素的大小具有弹性，以便在所有设备上看起来都不错，同时还要保持图像宽度和高度之间的比例。
#container > div {
aspect-ratio: 3/2;
}
相关页面
CSS 教程：CSS Grid 布局模块
CSS object-fit 属性：CSS Object-fit 属性
CSS object-position 属性：CSS Object-position 属性
