CSS aspect-ratio 屬性

這個 CSS 屬性可協助維持回應式版面配置的間距。

顯示比例

瀏覽器支援

  • Chrome:88。
  • Edge:88。
  • Firefox:89。
  • Safari:15。

資料來源

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

兩張長寬比相同的圖片。其中一個是 634 x 951 像素,另一個則是 200 x 300 像素。兩者的顯示比例都是 2:3。
兩張顯示比例相同的圖片。其中一個是 634 x 951 像素,另一個則是 200 x 300 像素。兩者的顯示比例都是 2:3。

隨著回應式設計問世,開發人員越來越重視維持長寬比,尤其當圖片尺寸不同,而且元素大小會隨著可用空間改變而改變時更是如此。

以下列舉幾個需要維持顯示比例的情況:

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

物件配置

定義顯示比例有助於我們在回應式內容中調整媒體大小。此值區中的另一項工具是 object-fit 屬性,可讓使用者說明區塊中物件 (例如圖片) 應如何填滿該區塊:

物件適配示範圖表
展示各種 object-fit 值。請參閱 Codepen 上的示範

initialfill 值會重新調整圖片,以填滿空間。在本例中,這會導致圖片重新調整像素,進而導致圖片變形模糊。不理想。object-fit: cover 會使用圖片最小尺寸來填滿空間,並根據這個尺寸裁剪圖片,以便將圖片裁剪成適合尺寸。它在最低邊界就會「放大」。object-fit: contain 可確保整個圖片一律顯示,這與 cover 相反,後者會採用最大邊界大小 (在上述範例中為寬度),並調整圖片大小,讓圖片在保持內在顯示比例的同時,也能適應空間。object-fit: none (預設物件位置) 會顯示圖片以自然大小為中心裁剪的畫面。

object-fit: cover 在大部分情況下通常都能運作,確保在處理不同尺寸的圖片時,都能提供良好的介面,但以這種方式會失去資訊 (圖片會在最長的邊緣裁剪)。

如果這些細節很重要 (例如使用美妝產品的平鋪圖),請勿裁剪重要內容。因此,理想情況下,回應式圖片的大小會有所不同,以便配合 UI 空間,而無需裁剪。

舊版技巧:使用 padding-top 維持顯示比例

使用 padding-top 為輪轉介面中的貼文預覽圖片設定 1:1 的顯示比例。
使用 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 的顯示比例。
使用 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 查看示範。

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

設定圖片顯示比例的另一種方法是透過圖片屬性。如果您事先知道圖片的尺寸,建議您將這些尺寸設為 widthheight,這是最佳做法

以上述範例來說,如果知道尺寸為 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 ShamblenLionel Gustave 提供,透過 Unsplash 提供。