CSS 實現固定寬高比

問題

之前遇到一個需求，頁面顯示一個彈窗，彈窗寬度是隨頁面寬度變化而變化的，要求彈窗的高度和寬度以一個固定的寬高比顯示，當時使用js來監聽window的resize事件實現的，如今回頭看看，徹底能夠用css實現。

實現

先看代碼

.box{
        width: 50%;
        position: relative;
}
.fill{
        height: 0;
        padding-bottom: 60%;
}
.content{
        width: 100%;
        height: 100%;
        position: absolute;
        background: #ccc;
        left: 0;
        top: 0;
}

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

主要實現思路是先定義一個容器 div.box，設置它的 positin 爲 relative , 用一個 div.fill 填充它，設置這個div的 height 爲 0 , padding-bottom 爲 60% , 這個 div 負責把外層的 div 的高度撐起來，而且是按照寬高比 5:3(100%:60%) 的固定比例，再放一個內容 div.content , 設置寬高同爲 100%, positin 爲 absolute，如今這個基本上就知足需求了。固然，這個需求還有別的解決方案，但思路基本上是一致的。

其餘實現

• 利用 margin 實現

.box{
        width: 50%;
        position: relative;
        overflow: hidden;
}
.fill{
        height: 0;
        margin-bottom: 60%;
}
.content{
        width: 100%;
        height: 100%;
        position: absolute;
        background: #ccc;
        left: 0;
        top: 0;
}

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

• 利用 :before 或 :after 僞元素實現

上面兩種實現方式有一個共同的缺點，增長了一個 div.fill 元素，這個元素能夠用僞元素替換。

.box{
        width: 50%;
        position: relative;
        overflow: hidden;
}
.box:before{
        height: 0;
        display: block;
        margin-bottom: 60%;
}
.content{
        width: 100%;
        height: 100%;
        position: absolute;
        background: #ccc;
        left: 0;
        top: 0;
}

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