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