aspect-ratio

Baseline 已廣泛支援

此功能已成熟，並可在多種裝置和瀏覽器版本上執行。自 2021 年 9 月起，所有瀏覽器均已支援此功能。

aspect-ratio CSS 屬性允許你定義元素盒子的所需寬高比。這意味著即使父容器或視口大小發生變化，瀏覽器也會調整元素的尺寸以保持指定的寬高比。指定的寬高比用於自動尺寸計算和一些其他佈局功能。

為了讓 aspect-ratio 生效，盒子的尺寸至少有一個需要是自動的。如果寬度和高度都不是自動尺寸，則提供的寬高比對盒子的首選尺寸沒有影響。

試一試

aspect-ratio: auto;

aspect-ratio: 1 / 1;

aspect-ratio: 16 / 9;

aspect-ratio: 0.5;

<section id="default-example">
  <img
    class="transition-all"
    height="640"
    id="example-element"
    src="/shared-assets/images/examples/plumeria.jpg"
    width="466" />
</section>

#example-element {
  height: 100%;
  width: auto;
}

語法

css

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* fallback to 'auto' for replaced elements */
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

此屬性指定為關鍵字 auto 或 <ratio> 之一或兩者。如果兩者都給定，並且元素是替換元素，例如 <img>，則在內容載入之前使用給定的比例。內容載入後，將應用 auto 值，因此將使用載入內容的固有寬高比。

如果元素不是替換元素，則使用給定的 ratio。

值

auto: 具有固有寬高比的替換元素使用該寬高比，否則盒子沒有首選寬高比。涉及固有寬高比的尺寸計算始終使用內容框尺寸。
<ratio>: 盒子的首選寬高比是指定的 width / height 比例。如果省略 height 和前面的斜槓字元，height 預設為 1。涉及首選寬高比的尺寸計算使用由 box-sizing 指定的盒子尺寸。
auto && <ratio>: 當 auto 和 <ratio> 一起指定時，如果元素是具有自然寬高比的替換元素（如 <img> 元素），則使用 auto。否則，將使用指定的 width / height 比例作為首選寬高比。

正式定義

初始值	`auto`
應用於	所有元素，除了內聯盒子和內部 Ruby 或表格盒子
繼承性	否
計算值	同指定值
動畫型別	按計算值型別

正式語法

aspect-ratio = 
  auto     ||
  <ratio>  

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

示例

探索固定寬度下的寬高比效果

在此示例中，<div> 元素的寬度已設定為 100px，高度設定為 auto。由於寬度值在此處是固定的，因此 aspect-ratio 屬性僅影響 <div> 元素的高度，以保持指定的寬高比。

<div>1/1</div>
<div>0.5</div>
<div>1</div>
<div>1/0.5</div>
<div>16/9</div>

div {
  display: inline-flex;
  background-color: lime;
  justify-content: center;
}

css

div {
  width: 100px;
  height: auto;
}
div:nth-child(1) {
  aspect-ratio: 1/1;
}
div:nth-child(2) {
  aspect-ratio: 0.5;
}
div:nth-child(3) {
  aspect-ratio: 1;
}
div:nth-child(4) {
  aspect-ratio: 1/0.5;
}
div:nth-child(5) {
  aspect-ratio: 16/9;
}

回退到自然寬高比

在此示例中，我們使用兩個 <img> 元素。第一個元素未將其 src 屬性設定為影像檔案。

html

<img src="" /> <img src="plumeria.jpg" />

以下程式碼將 3/2 設定為首選寬高比，並將 auto 設定為回退。

css

img {
  display: inline;
  width: 200px;
  border: 2px dashed red;
  background-color: lime;
  vertical-align: top;

  aspect-ratio: 3/2 auto;
}

請注意，第一個沒有替換內容的影像保持 3/2 的寬高比，而第二個影像在內容載入後使用影像的自然寬高比。

規範

規範
CSS Box Sizing Module Level 4 # aspect-ratio

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

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

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