新的 CSS 屬性有助於維持回應式版面配置中的間距。
顯示比例
顯示比例最常以兩個整數和冒號表示,其尺寸可以是寬和高或 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 提供。