1、 認識
翻譯 縱橫比；螢幕高寬比 n.縱橫比，螢幕高寬比; 寬高比
最新的瀏覽器chrom88 穩定版釋出的資訊看到，已經完全支援aspect-ratio了
應用場景 aspect ratio翻譯為中文就是寬高比（也稱：縱橫比）即x:y。我們日常生活中常見的寬高比由4:3和16:9。如圖： x:y = 4:3
為什麼會有這個屬性呢？
一般情況下只有某些替換的元素具有長寬比，尤其是影象。
對於它們，如果僅指定寬度和高度之一，則可以使用固有長寬比從中計算出另一個。
然而對於大多數元素是不具有此性質的，此屬性允許為任何其他元素顯式指定長寬比，以獲得相似的行為。隨著科技的發展，對於我們web人員的來說，保持寬高比越來越重要，尤其當元素尺寸需要我們同時適配不同裝置時。
2、 舊的解決方案：padding-top
在chrome88之前不支援aspect-ratio的時候，主要的方案是使用padding-top或者padding-bottom來解決。
講述padding-top之前，請思考使用一個div實現width為200px, height為0的的正方形？
width: 200px; height: 0; ???
很多面試來的同學都會直接說padding-top: 100%或者padding-bottom: 100%; 那麼就錯了，表現如下：
原因： padding-top的百分比是基於父元素的width來計算的
此方案也被稱為“ 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="1.jpg"> </div>
.container {
position: relative;
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
}
.media { position: absolute; top: 0; }
3、使用aspect-ratio
比如我們正常在我們的專案之中經常會使用背景圖，如何設定一個滿螢幕1920x1080的背景圖,這個時候我們就可以這麼做。
aspect-ratio: 1920/1080;
不幸的是使用padding-top來計算寬高比顯得不夠直觀。並且需要一些額外的開銷和定位。有了新的aspect-ratio 屬性，用於保持縱橫比就更加清晰了
我們將padding-top：100%改為aspect-ratio: 1/1來設定width/height的比率
.container {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 4px 4px 0 0;
overflow: hidden;
}
.media { /* position: absolute; top: 0; */ }
此新屬性還增加了將長寬比設定為auto的功能，其中“具有固有長寬比的[可替換元素]將使用該長寬比；否則，該框沒有首選的長寬比”。如果同時指定了auto和，則優選的寬高比是指定的寬度與高度之比，除非它是具有固有長寬比的可替換元素，在這種情況下，將使用長寬比。
例1： 保持網格一致性
這對於CSS佈局機制（例如CSS Grid和Flexbox）也非常有效。考慮一個列表，其中你需要保持1：1縱橫比的子級，例如：
<ul class="grid"> <li class="subgrid"> <img src="./ins.jpg"/> </li> <li class="subgrid"> <img src="./ins.jpg"/> </li> </ul>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.subgrid img {
aspect-ratio: 1 / 1;
width: 100%;
object-fit: contain;
}
例2：防止佈局偏移
使用aspect-ratio屬性，它可以建立一個佔位符空間，以此來防止佈局偏移，從而獲得更好的效能。
例3：對可替換元素設定指定的寬和高，透過將現有尺寸轉換為優選的縱橫比，為它賦予首選的長寬比，還會為它提供自然的高度或寬度。
<img src="image.jpg" alt="..." width="8" height="6">
img { width: 100%; }
同理：iframe上設定width和height來獲得和影象類似的寬高比，如：
<iframe src="https://www.youtube.com/embed/0Gr1XSyxZy0" width=560 height=315>
@supports (aspect-ratio: attr(width number) / 1) {
iframe {
aspect-ratio: attr(width number) / attr(height number);
width: 100%; height: auto;
}
}
總而言之。藉助新的aspect-ratioCSS屬性，可以在多種現代瀏覽器使媒體或佈局容器中保持適當的寬高比變得更加簡單。
相容性：
