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

時間 2019-11-21

標籤 css 實現高等比例自適應矩形欄目 CSS 简体版

原文原文鏈接

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

概述

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

通過搜索引擎的篩選和本身的反覆試驗,發現使用padding-bottom是最完美的解決方案。搜索引擎

解決方案

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

代碼以下：code

<divclass="scale"></div>

<style>
    .scale {
        width: 100%;
        height: 0;
        padding-bottom: 50%;
    }
</style>
複製代碼

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

咱們將元素的高度由padding撐開，因爲padding是根據父元素寬度計算的，因此高度也就變成了相對父元素寬度，同時要將height設置爲 0，這是爲了將元素高度徹底交給padding負責。get

最後padding-bottom的值設爲width的值一半，就能夠實現高度是寬度的一半且自適應啦。it

改進

光是這樣寫仍是不夠的，由於元素的height爲 0，致使該元素裏面再有子元素的時候，就沒法正常設置高度。因此咱們須要用到position: absolute;。代碼以下：io

<divclass="scale"><divclass="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的時候就很麻煩了。如何解決呢？class

這時候咱們須要在外層再套一個父元素，將寬度的控制交給這個父元素來作。容器

代碼以下：

<body><divclass="box"><divclass="scale"><divclass="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>
複製代碼

如此，就能夠完美解決。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。