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

沒有色彩的FE發表於2018-06-30

剛入職的時候，沒有公司七牛上傳圖片的許可權，頁面嵌入圖片的時候不能使用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實現長寬比的幾種方案》



相關文章