Chromium、Safari 技術預覽和 Firefox Nightly 支援新的顯示比例 CSS 屬性

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

Una Kravets

顯示比例

顯示比例最常以兩個整數和冒號表示，其尺寸可以是寬和高或 x:y。最常見的攝影長寬比為 4:3 和 3:2，影片及較新的消費者相機則通常是 16:9。

隨著回應式設計問世，網頁程式開發人員越來越重視維持長寬比，因為圖片尺寸不同，且元素大小會隨可用空間而改變。

以下列舉一些維持顯示比例的重要性：

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

物品貼合度

定義顯示比例有助於我們調整媒體大小，以因應回應式情境。這個值區中的另一項工具是 object-fit 屬性，可讓使用者描述區塊中的物件 (例如圖片) 應如何填滿該區塊：

initial 和 fill 值會重新調整圖片以填滿空間。在此範例中，這會導致圖片經過旋轉且模糊，因為系統會重新調整像素。不理想。object-fit: cover 會使用圖片的最小尺寸來填滿空間，並依據這個尺寸將圖片裁剪為適當的大小。它會在最低邊界「放大」。object-fit: contain 可確保整張圖片會持續顯示，因此與 cover 相反，後者會採用最大邊界大小 (上述範例為寬度)，並調整圖片大小，在符合空間大小的情況下，維持原質的顯示比例。object-fit: none 案例顯示的圖片以自然大小裁剪 (預設物件位置)。

object-fit: cover 在大多數情況下都能正常運作，以確保在處理不同尺寸的圖片時，能夠提供良好的統一介面，但這麼做會失去資訊 (在最長邊緣遭到裁剪)。

如果這些細節非常重要 (例如處理平裝的美容產品時)，禁止裁剪重要的內容。因此，最理想的情況是回應式圖片，其尺寸能配合 UI 空間調整大小，不會遭到裁剪。

舊的駭客做法：透過 padding-top 維持長寬比

為了讓這類素材資源反應更加靈敏，我們可以採用長寬比。這可讓我們設定特定的比率大小，並以個別軸 (高度或寬度) 做為媒體的其餘部分。

目前廣受認可的跨瀏覽器解決方案，根據圖片寬度保持顯示比例，稱為「邊框間距 (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 保持顯示比例

遺憾的是，計算這些 padding-top 值並不直觀，且需要額外的負擔和定位。透過新的內建函式 aspect-ratio CSS 屬性，維持顯示比例的語言會更加清楚。

有了相同標記，我們就能將 padding-top: 56.25% 替換為 aspect-ratio: 16 / 9，將 aspect-ratio 設為 width / height 的指定比例。

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

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

使用 aspect-ratio 而不是 padding-top 會比較清楚，而且不會過度改造邊框間距屬性，以執行超出其一般範圍的作業。

這個新屬性還加入了將顯示比例設為 auto 的功能，其中「以內建顯示比例取代元素會使用該顯示比例；否則，方塊沒有偏好的顯示比例」。如果同時指定 auto 和 <ratio>，偏好的顯示比例是 width 除以 height 的指定比例。不過，如果元素是採用內建顯示比例的替換元素，就會改用顯示比例。

範例：網格中的一致性

這項功能非常適合與 CSS Grid 和 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;
}

範例：避免版面配置位移

aspect-ratio 的另一項實用功能，就是可以建立預留位置空間，避免累計版面配置位移，並提供更優質的網站體驗指標。在第一個範例中，從 Unsplash 等 API 載入資產時，會在媒體載入完畢時建立版面配置位移。

另一方面，使用 aspect-ratio 可建立預留位置，防止這個版面配置位移：

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

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

另一種設定圖片顯示比例的方法是透過圖片屬性。如果您事先知道圖片尺寸，是最佳做法將這些尺寸設為 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%;
}

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

結論

使用新的 aspect-ratio CSS 屬性，即可在多種新式瀏覽器中啟動，在媒體和版面配置容器中維持適當的顯示比例，需要簡單直觀。

相片由 Amy Shamblen 和 Lionel Gustave 透過 Unsplash 提供。