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

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

Una Kravets

注意： 摘要：如要確保回應式網頁設計以及避免累計版面配置位移，請務必維持一致的寬度與高度比例 (稱為「顯示比例」)。現在，我們在 Chromium 88、Firefox 87 和 Safari 技術預覽 118 中推出全新的 aspect-ratio 屬性，能讓使用者更輕鬆地完成這項操作。

顯示比例

瀏覽器支援

• 88 分
• 88 分
• 89 人
• 15 人

資料來源

顯示比例最常在下列維度中以兩個整數和冒號表示： 寬度:高度或 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 值。請參閱 Codepen 示範。

initial 和 fill 值會重新調整圖片來填滿空間。在本範例中，這會造成 因為會重新調整像素，所以圖片會變得十分模糊並模糊。不理想。object-fit: cover 使用 圖片的最小尺寸以填滿空間，並依據此範例裁剪圖片以符合空間 維度。將圖片放大設定在最低邊界object-fit: contain 可確保整張圖片 一律會顯示，因此與 cover 相反，後者採用最大邊界的大小 (在上述範例中，此為寬度)，並且調整圖片大小，以維持原始的顯示比例 並融入空間object-fit: none 案例顯示圖片中央裁剪的比例 (預設物件位置)。

object-fit: cover 通常用於大多數情況，以確保在處理資源時提供良好的介面 不過，圖片會遺失尺寸，但以這種方式會遺失資訊 (圖片的裁剪位置為 最長的邊緣)。

如果這些細節很重要 (例如處理整套美容產品時)， 不得裁剪重要內容理想情境是 配合 UI 空間大小調整各種尺寸，而不裁剪任何大小。

以前的妙招：使用 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 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;
}

敬上

格狀檢視中圖片，其父項元素採用各種顯示比例尺寸。查看 Codepen 的示範。

範例：防止版面配置位移

aspect-ratio 的另一個實用功能，是可以建立預留位置空間來防止 累計版面配置位移，並提升網站體驗指標。第一則介紹 例如，從 Unsplash 等 API 載入資產時， 媒體載入完畢後的版面配置位移。

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

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

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

敬上

影片採用特定長寬比，且已載入至載入的素材資源。這部影片是透過模擬的 3G 網路錄製。查看 Codepen 的示範。

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

另一種設定圖片顯示比例的方法，是使用圖片屬性。如果您事先知道圖片尺寸，建議您的最佳做法 將這些維度設為 width 和 height。

以上述範例為例，如果知道尺寸是 800px x 600px，圖片標記看起來會像這樣：<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%;
}

最後，效果與將 aspect-ratio 並避免使用累計版面配置位移 (觀看示範 Codepen)。

結論

透過全新的 aspect-ratio CSS 屬性在多個新型瀏覽器中推出，維持適當的 媒體和版面配置容器中的顯示比例會更清楚一點。

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