實現固定寬高比盒子的幾種方案的總結

剛入職的時候，沒有公司七牛上傳圖片的權限，頁面嵌入圖片的時候不能使用img標籤,只能寫一個盒子把圖片寫成背景屬性，可是這樣也失去了圖片的自適應特性。爲了能夠讓背景圖片也能靈活適應，能夠先根據圖片的寬高比實現一個固定寬高比的盒子，而後background-size:100%,也能讓圖片不變形，因此總結了幾種常見使用的固定寬高比的方案

padding-top or padding-bottom

方法簡單，使用性很強，適用於大部分場景

div class="aspectration" data-ratio="16:9">
     <div class="content"></div>
</div>
複製代碼

.aspectration {
    height: 0;
    width: 100%;
}

.aspectration[data-ratio="16:9"] {
    padding-top: 56.25%;
}
複製代碼

結合calc

.aspectration[data-ratio="16:9"] {
    padding-top:  calc(100% * 9 / 16);
}
複製代碼

結合僞元素

.aspectration:after { 
    content: ""; 
    display: block; 
    width: 1px; 
    margin-left: -1px; 
} 
.aspectration[data-ratio="16:9"]:after {
    padding-top: 56.25%; 
}
複製代碼

css新特性 CSS Grid Layout

直接上代碼

.aspectration {  
    display: grid; 
    grid-template-columns: repeat(16, 6.25vw); 
    grid-auto-rows: 6.25vw; 
    
} 
.aspectration[data-ratio="16:9"] .content { 
    grid-column: span 16; 
    grid-row: span 9;
}
複製代碼

將來的新標準 aspect-ratio

還沒有支持，能夠藉助PostCSS Aspect Ratio，實現基礎跟第一種padding方式相同

總結：padding方式的實現適用性最爲普遍，兼容性更好，至關於一種hack，網格實現比較複雜，只在現代瀏覽器支持，aspect-ratio方式最爲優雅，語義更加明顯，是將來的趨勢。

參考自大漠老師的《css實現長寬比的幾種方案》