CSS aspect-ratio 屬性

有助於在回應式版面配置中維持間距的 CSS 屬性。

Una Kravets

注意： 摘要：維持一致的寬高比 (稱為長寬比) 對於回應式網頁設計至關重要，有助於避免累計版面配置位移。現在，您可以使用 aspect-ratio 屬性，以更直接的方式執行這項操作。這項屬性將在 Chromium 88、Firefox 87 和 Safari 技術預覽版 118 中推出。

顯示比例

Browser Support

• 88
• 88
• 89
• 15

Source

顯示比例最常見的表示方式是兩個整數和一個冒號，以寬度:高度或 x:y 表示。攝影最常見的顯示比例為 4:3 和 3:2，而影片和較新的消費型相機則傾向採用 16:9 的顯示比例。

兩張顯示比例相同的圖片。一個是 634 x 951 像素，另一個是 200 x 300 像素。兩者顯示比例皆為 2:3。

隨著自動調整式設計的出現，維持顯示比例對網頁開發人員來說日益重要，尤其是在圖片尺寸不同，且元素大小會根據可用空間而變動的情況下。

以下列舉幾個維持長寬比很重要的情況：

• 建立回應式 iframe，寬度為父項的 100%，高度則維持特定可視區域比例
• 為圖片、影片和嵌入內容建立內建預留位置容器，避免項目載入並佔用空間時重新配置版面
• 為互動式資料視覺化或 SVG 動畫建立一致的回應式空間
• 為多個元素元件 (例如資訊卡或日曆日期) 建立一致的回應式空間
• 為多張不同尺寸的圖片建立一致的回應式空間 (可與 object-fit 一併使用)

object-fit

定義長寬比有助於我們在回應式環境中調整媒體大小。這個類別中的另一個工具是 object-fit 屬性，可讓使用者說明區塊中的物件 (例如圖片) 應如何填滿該區塊：

展現各種 object-fit 值。請參閱 Codepen 上的示範。

initial 和 fill 值會重新調整圖片，填滿空間。在本例中，這會導致圖片遭到擠壓並模糊不清，因為系統會重新調整像素。不太理想。object-fit: cover 會使用圖片的最小尺寸填滿空間，並根據這個尺寸裁剪圖片，使其符合空間大小。在最低邊界「放大」。object-fit: contain 可確保圖片一律完整顯示，因此與 cover 相反，後者會採用最大邊界的大小 (以上述範例來說是寬度)，並調整圖片大小以維持內建長寬比，同時配合空間大小。object-fit: none 案例顯示圖片在自然大小下，於中心位置裁剪 (預設物件位置)。

在處理不同尺寸的圖片時，object-fit: cover 通常適用於大多數情況，可確保介面美觀一致，但這樣做會遺失資訊 (圖片最長邊緣會遭到裁剪)。

如果這些細節很重要 (例如處理美妝產品的平放拍攝照片時)， 裁剪重要內容就不可接受。因此，理想情況是提供不同大小的回應式圖片，讓圖片能配合使用者介面空間調整大小，且不會遭到裁剪。

舊方法：使用 padding-top 維持顯示比例

使用 padding-top 在輪轉介面中設定貼文預覽圖片的 1:1 長寬比。

如要讓這些元素更具回應性，可以使用顯示比例。這可讓我們設定特定比例大小，並根據個別軸 (高度或寬度) 調整其餘媒體。

目前廣為接受的跨瀏覽器解決方案是「Padding-Top Hack」，可根據圖片寬度維持顯示比例。這個解決方案需要父項容器和絕對位置的子項容器。然後以百分比計算長寬比，設為 padding-top。例如：

• 顯示比例 1:1 = 1 / 1 = 1 = padding-top: 100%
• 4:3 顯示比例 = 3 / 4 = 0.75 = padding-top: 75%
• 長寬比 3:2 = 2 / 3 = 0.66666 = padding-top: 66.67%
• 顯示比例 16:9 = 9 / 16 = 0.5625 = padding-top: 56.25%

現在我們已找出長寬比值，可以將該值套用至父項容器。請參考以下範例：

<div class="container">
  <img class="media" src="..." alt="...">
</div>

接著，我們可以編寫下列 CSS：

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

使用 aspect-ratio 維持顯示比例

使用 aspect-ratio 在輪轉介面中，將貼文預覽圖片的顯示比例設為 1:1。

很遺憾，計算這些 padding-top 值並不容易，需要額外的負擔和定位。有了新的內建 aspect-ratio CSS 屬性，維持顯示比例的語言就更清楚了。

使用相同的標記，我們可以將 padding-top: 56.25% 替換為 aspect-ratio: 16 / 9，並將 aspect-ratio 設為 width / height 的指定比例。

使用 padding-top

.container {
  width: 100%;
  padding-top: 56.25%;
}

使用顯示比例

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

使用 aspect-ratio 而不是 padding-top 清楚許多，而且不會大舉修改邊框間距屬性，以執行超出一般範圍的動作。

這項新屬性也新增了將顯示比例設為 auto 的功能，其中「具有內建顯示比例的取代元素會使用該顯示比例；否則方塊沒有偏好的顯示比例」。如果同時指定 auto 和 <ratio>，除非是具有內建顯示比例的已取代元素，否則偏好的顯示比例是 width 除以 height 的指定比例，在這種情況下，系統會改用該顯示比例。

範例：格線中的一致性

這項功能也與 CSS 格線和 Flexbox 等 CSS 版面配置機制搭配得天衣無縫。假設您要維護子項的 1:1 顯示比例，例如贊助商圖示的格線：

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

網格中的圖片，其父項元素具有各種長寬比維度。在 Codepen 上查看示範。

範例：避免版面配置位移

aspect-ratio 的另一項優點是可建立預留空間，避免累計版面配置位移，並提供更優質的 Web Vitals。在第一個範例中，從 Unsplash 等 API 載入素材資源時，媒體載入完成後會造成版面配置位移。

影片：載入的素材資源未設定顯示比例時，發生累計版面配置位移。這部影片是在模擬的 3G 網路下錄製。

另一方面，使用 aspect-ratio 則會建立預留位置，避免發生版面配置位移：

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

載入的素材資源會設定特定顯示比例的影片。這部影片是在模擬的 3G 網路下錄製，在 Codepen 上查看示範。

額外提示：圖片屬性的顯示比例

如要設定圖片的顯示比例，也可以使用圖片屬性。如果事先知道圖片的尺寸，建議您將這些尺寸設為 width 和 height，這是最佳做法。

以上述範例來說，如果尺寸為 800 像素 x 600 像素，圖片標記會如下所示：<img src="image.jpg" alt="..." width="800" height="600">。如果傳送的圖片具有相同的顯示比例，但不一定具有這些確切的像素值，我們仍可使用圖片屬性值設定比例，並搭配 width: 100% 的樣式，讓圖片佔用適當空間。總而言之，程式碼如下所示：

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
  height: auto;
}

最終效果與透過 CSS 在圖片上設定 aspect-ratio 相同，且可避免累計版面配置位移 (請參閱 Codepen 上的範例)。

結論

隨著多個新版瀏覽器推出新的 aspect-ratio CSS 屬性，在媒體和版面配置容器中維持適當的長寬比會更加簡單。

相片來源：Amy Shamblen 和 Lionel Gustave (透過 Unsplash)。