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

新的 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」維持顯示比例

使用顯示比例,針對輪轉介面中的貼文預覽圖片設定 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 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 的示範。

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

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

以上述範例為例,如果知道尺寸是 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 ShamblenLionel Gustave (透過 Unsplash)。