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 屬性