CSS aspect-ratio 属性

向元素添加纵横比：

div {
aspect-ratio: 3 / 2;
}

下面有更多 "亲自试一试" 示例。

定义和用法

这个aspect-ratio属性允许您定义元素的宽度和高度之间的比率。

如果aspect-ratio和width设置属性后，高度将遵循定义的宽高比。

为了更好地理解aspect-ratio属性，查看演示。

提示：使用aspect-ratio响应式布局中的属性，其中元素的大小通常有所不同，并且您希望保留宽度和高度之间的比率。

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
aspect-ratio	88	88	89	15	74

aspect-ratio: number/number|initial|inherit;

Property Value	Description	Demo
number	First number specifies the number for width in aspect ratio.	Demo ❯
number	Second number specifies the number for height in aspect ratio. Optional. If not set, number for height is 1 as default.	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

这个aspect-ratio如果 div 元素的大小应该变化，则属性有利于控制 div 元素的纵横比。在图片库中，当您希望 div 元素的大小灵活以便在所有设备上看起来都不错，但您还希望保留图片的宽度和高度之间的比率时，可能会出现这种情况：

#container > div {
aspect-ratio: 3/2;
}