<ratio>

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

<ratio> CSS 資料型別描述了兩個值之間的比例關係。它主要表示寬高比，即寬度與高度的關係。例如，<ratio> 在 @media 媒體查詢中用作 aspect-ratio 媒體特性值，在 @container 容器查詢中用作 aspect-ratio 大小特性值，以及用作 CSS aspect-ratio 屬性的值。

語法

<ratio> 資料型別是 <number> 後跟一個正斜槓（'/'，Unicode U+002F SOLIDUS），再後跟第二個 <number>。兩個數字都必須是正數。斜槓前後可以有空格。第一個數字表示寬度，第二個數字表示高度。此外，也可以使用單個 <number> 作為值。

兩個比例透過它們的商的數值進行比較。例如，16/16 小於 16/9，因為前者解析為 1，而後者解析為 1.7。這意味著高屏的寬高比小於寬屏的，縱向圖片的寬高比小於橫向圖片的。

常見寬高比

A rectangle that is three units tall and four units wide

A rectangle that is nine units tall and sixteen units wide

比率		用法
`4/3` 或 `1.33333`		二十世紀的傳統電視格式。
`16/9` 或 `1.7777778`		現代“寬屏”電視格式。
`185/100` 或 `1.85`		自 20 世紀 60 年代以來最常見的電影格式。
`239/100` 或 `2.39`		“寬屏”，變形電影格式。

正式語法

<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?

示例

在媒體查詢中使用

css

@media screen and (aspect-ratio >= 16/9) {
  /* … */
}

在 @container 大小查詢中使用

css

@container (aspect-ratio > 1) and (width < 20em) {
  /* … */
}

用作 CSS 屬性值

css

.square {
  aspect-ratio: 1 / 1;
}
.circle {
  aspect-ratio: 1;
  border-radius: 50%;
}
.portrait {
  aspect-ratio: 5 / 7;
}

規範

規範
CSS 值和單位模組第 4 級 # 比率值

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面由 MDN 貢獻者最後修改於 2025年10月10日。

在 GitHub 上檢視此頁面 • 報告此內容的問題