CSS 實現自適應正方形

在處理移動端頁面時，我們有時會需要將banner圖做成與屏幕等寬的正方形以獲得最佳的體驗效果，比如，商品詳情頁，

 

方法1、CSS3 vw單位

CSS3 中新增了一組相對於可視區域百分比的長度單位 vw, vh, vmin, vmax。其中 vw 是相對於視口寬度百分比的單位，1vw = 1% viewport width， vh 是相對於視口高度百分比的單位，1vh = 1% viewport height；vmin 是相對當前視口寬高中 較小 的一個的百分比單位，同理 vmax 是相對當前視口寬高中 較大 的一個的百分比單位。該單位瀏覽器兼容性查看：https://caniuse.com/#search=vw

<div class="box"></div>

<style>
    .box{width: 100vw;height: 100vw;background: #F2DEDE;}
</style>

優點：簡潔方便

缺點：瀏覽器兼容不好

 

方法2、設置垂直方向的padding撐開容器

在 CSS 盒模型中，一個比較容易被忽略的就是 margin, padding 的百分比數值計算。

按照規定，margin, padding 的百分比數值是相對 父元素寬度 的寬度計算的。由此可以發現只需將元素垂直方向的一個 padding 值設定為與 width 相同的百分比就可以制作出自適應正方形

<div class="box"></div>

<style>
     .box{
        width: 100%;
        padding-bottom: 100%;/* padding百分比相對父元素寬度計算 */
        height: 0;//避免被內容撐開多余的高度
    }
</style>    

這種方案簡潔明了，且兼容性好；但。。。可能碰上max-height不收縮，怎么辦 ? 那就用方法3...

 

方法3、利用偽元素的 margin(padding)-top 撐開容器

<div class="box"></div>

<style>
    .box {width: 100%;overflow:hidden; background: #F2DEDE;}
    .box::after {content: "";display: block;margin-top: 100%;}
</style>

這里就涉及到margin collapse的概念，由於容器與偽元素在垂直方向發生了外邊距折疊，所以我們想象中的撐開父元素高度並沒有出現。而應對的方法是在父元素上觸發 BFC：overflow:hiddden;

若使用垂直方向上的 padding 撐開父元素，則不需要觸發 BFC，如下：

<div class="box"></div>

<style>
    .box {width: 100%;background: #F2DEDE;}
    .box::after {content: "";display: block;padding-top: 100%;}
</style>

注意：當元素內部添加內容時高度出現溢出，可以將內容放到獨立的內容塊中，利用絕對定位消除空間占用，如下：

<div class="container">
    <div class="box">內容</div>
</div>

<style>
    .container {width: 100%;background: #F2DEDE;position: relative;}
    .container::after {content: "";display: block;padding-top: 100%;}
    .container .box{position: absolute;width: 100%;height: 100%;}
</style>