前言
新的一年，前端早讀課繼續陪伴你。在【第2200期】Chrome 88 重要更新解讀有提到aspect-ratio屬性，今天可以來看看新老方案。今日前端早讀課文章由@飄飄翻譯投稿分享。
正文從這開始~~
新的CSS屬性，幫助在響應式布局中保持間距。
保持一致的寬高比(稱為寬高比)對於響應式web設計和防止累積布局移位至關重要。現在，有一種更直接的方法可以實現這一點，即在Chromium 88、Firefox 87和Safari技術預覽版118中啟動新的aspect-ratio屬性。
寬高比寬高比最常見的表示方式是兩個整數和一個冒號，尺寸為：寬：高，或x：y。攝影中最常見的寬高比是4:3和3:2，而視頻和相機則傾向於16:9的寬高比。
兩張寬高比相同的圖片。一張是634 x 951px，另一張是200 x 300px。兩者的寬高比都是2:3。隨著響應式設計的出現，保持寬高比對Web開發人員來說越來越重要，尤其是當圖像尺寸不同，元素大小隨著可用空間的變化而變化時。
以下例子說明了保持寬高比的重要性:
創建響應式iframe，其寬度為父級的100%，而高度應保持特定的視口比例。
為圖片、視頻和嵌入創建內部佔位容器，以防止在項目加載和佔用空間時重新布局。
為交互式數據可視化或SVG動畫創建統一的、響應性強的空間。
為多元素組件（如卡片或日曆日期）創建統一的、響應性強的空間。
為不同尺寸的多個圖像創建統一的響應空間（可與object-fit一起使用）。
Object-fit定義寬高比有助於我們在響應式上下文中調整媒體的大小。這個框中的另一個工具是object-fit屬性，它允許用戶描述一個塊中的對象（如圖像）應該如何填充該塊。
展示各種Object-fit值Codepen：https://codepen.io/una/pen/mdrLGjR
initial值和fill值重新調整圖像以填充空間。在例子中，這導致圖像被擠壓和模糊，因為它重新調整了像素。object-fit: cover 使用圖像的最小尺寸來填充空間，並根據這個尺寸裁剪圖像以適應它。object-fit: contain 確保整個圖像總是可見的，因此與cover相反，它採用最大邊界的尺寸（在上面的例子中是寬度），並調整圖像的大小以保持其固有的寬高比，同時適應空間。object-fit: none的情況下，圖像以其自然尺寸在中心（默認對象位置）進行裁剪。
object-fit: cover 往往在大多數情況下都能確保在處理不同尺寸的圖像時有一個很好的統一界面，但是，這種方式會丟失信息（圖像在其最長的邊緣被裁剪）。
如果這些細節很重要（例如，當使用美容產品的平面時），裁剪重要內容是不可接受的。所以，理想的情況是採用不同尺寸的響應式圖片，以適應UI空間，而不需要裁剪。
老方法：用padding-top來保持寬高比使用 padding-寬高 在 carousel 中設置後預覽圖像的寬高比為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;
}
用寬高比來維持寬高比在 carousel 中使用寬高比設置後預覽圖像的1:1寬高比不幸的是，計算這些padding-top值並不是很直觀，需要一些額外的開銷和定位。有了新的內置 aspect-ratio CSS屬性，維護寬高比的語言就清晰多了。
用同樣的標記，我們可以用aspect-ratio16/9代替padding-top: 56.25%，將aspect-ratio設置為指定的width/height。
使用 padding-top.container {
width: 100%;
padding-top: 56.25%;
}
使用 aspect-ratio.container {
width: 100%;
aspect-ratio: 16 / 9;
}
使用 aspect-ratio 代替 padding-top 更加清晰，並且不會修改padding屬性來做一些超出其通常作用域的事情。
這個新屬性還增加了將寬高比設置為auto的功能，其中 "內置寬高比的替換元素使用該寬高比; 否則盒子沒有首選的寬高比。"。如果同時指定了auto和 <ratio>，則首選的寬高比是指定的width除以height的比例，除非它是具有內置寬高比的替換元素，在這種情況下，使用寬高比代替。
例如：網格中的一致性這對於CSS布局機制（如CSS Grid和Flexbox）也非常有效。考慮一個帶有子元素的列表，你想保持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：https://codepen.io/una/pen/PoGddaw
例子：防止布局移位高寬比的另一個重要特性是，它可以創建佔位符空間，以防止累積布局移位，並提供更好的Web Vitals。在第一個例子中，從諸如 Unsplash 之類的 API 加載資源，當媒體加載完成後會產生布局變化。
視頻的布局移位發生時，沒有設置寬高比的負載資源。這個視頻是用一個仿真的3G 網絡錄製的。
另一方面，使用高寬比會創建一個佔位符來防止這種布局偏移。
img {
width: 100%;
aspect-ratio: 8 / 6;
}
在已加載的資源上設置視頻的寬高比。這個視頻是用模擬的3G網絡錄製的。Codepen：https://codepen.io/una/pen/GRjLZmG
額外的提示：圖像屬性的寬高比另一種設置圖像寬高比的方法是通過圖像屬性。如果你事先知道圖片的尺寸，最好的做法是將這些尺寸設置為它的寬度和高度。
對於我們上面的例子，知道尺寸是800px×600px，圖像標記就會像這樣。<imgsrc="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：https://codepen.io/una/pen/gOwJWoz
結論在多個現代瀏覽器中，有了新的aspect-ratio CSS屬性，在你的媒體和布局容器中保持適當的寬高比變得更加簡單。
關於本文原文：https://web.dev/aspect-ratio/
為你推薦
【第2193期】7個你可能不認識的CSS單位
【第2149期】V8中的快屬性
歡迎自薦投稿，前端早讀課等你來