CSS aspect-ratio 属性

定义和用法

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

如果设置了 aspect-ratio 和 width 属性，高度将按照定义的长宽比进行调整。

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

提示：在响应式布局中使用 aspect-ratio 属性，当元素的大小经常变化时，您希望保持宽度与高度之间的比例。

实例

例子 1

为元素添加长宽比：

div {
  aspect-ratio: 3 / 2;
}

亲自试一试

例子 2

如果 div 元素的大小需要变化，aspect-ratio 属性非常适合控制 div 元素的长宽比。例如，在图片库中，您希望 div 元素的大小灵活以适应所有设备，但同时希望保持图片的宽高比：

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

<div id="container">
  <div>alley</div>
  <div>flowers by the street</div>
  <div>mountains</div>
  <div>Cinque Terre</div>
</div>

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

教程：CSS 网格布局模块

参考：CSS Object-fit 属性

参考：CSS Object-position 属性