CSS實現寬高等比例自適應矩形

91蝦嗶嗶發表於2018-05-25
CSS

本文首發於蝦嗶嗶的Blog

概述

今天遇到一個很有趣的問題：如何實現一個寬度自適應，高度為寬度的一半的矩形。

經過搜尋引擎的篩選和自己的反覆試驗,發現使用padding-bottom是最完美的解決方案。

解決方案

首先我們要明白，padding和margin都是相對於父元素的寬度來計算的，我們可以利用這一屬性來實現我們的需求。

程式碼如下：

<div class="scale"></div>
複製程式碼
<style>
    .scale {
        width: 100%;
        height: 0;
        padding-bottom: 50%;
    }
</style>
複製程式碼

這其中的關鍵點就是height: 0;和padding-bottom: 50%;。

我們將元素的高度由padding撐開，由於padding是根據父元素寬度計算的，所以高度也就變成了相對父元素寬度，同時要將height設定為 0，這是為了將元素高度完全交給padding負責。

最後padding-bottom的值設為width的值一半，就可以實現高度是寬度的一半且自適應啦。

改進

光是這樣寫還是不夠的，因為元素的height為 0，導致該元素裡面再有子元素的時候，就無法正常設定高度。所以我們需要用到position: absolute;。程式碼如下：

<div class="scale">
    <div class="item">
        這裡是所有子元素的容器
    </div>
</div>
複製程式碼
<style>
    .scale {
        width: 100%;
        padding-bottom: 56.25%;
        height: 0;
        position: relative; //
    }

    .item {
        width: 100%;
        height: 100%;
        background-color: aquamarine;
        position: absolute; //
    }
</style>
複製程式碼

繼續改進

解決了子元素的問題，那麼我們再來看看元素本身。由於我們一開始的需求是寬高比 2:1,這種比較好實現，但是後來需求又想要 16:9 的寬高比，而且寬度不是 100%，那這樣計算 padding-bottom的時候就很麻煩了。如何解決呢？

這時候我們需要在外層再套一個父元素，將寬度的控制交給這個父元素來做。

程式碼如下：

<body>
    <div class="box">
        <div class="scale">
            <div class="item">
                item
            </div>
        </div>
    </div>
</body>
複製程式碼
<style>
    /* box 用來控制寬度 */
    .box {
        width: 80%;
    }
    /* scale 用來實現寬高等比例 */
    .scale {
        width: 100%;
        padding-bottom: 56.25%;
        height: 0;
        position: relative;
    }
    /* item 用來放置全部的子元素 */
    .item {
        width: 100%;
        height: 100%;
        background-color: aquamarine;
        position: absolute;
    }
</style>
複製程式碼

如此，就可以完美解決。

線上演示

相關文章