CSS实现宽高等比例自适应矩形

时间 2019-11-05

标签 css 实现高等比例自适应矩形栏目 CSS 繁體版

原文原文链接

本文首发于虾哔哔的Blogcss

概述

今天遇到一个颇有趣的问题：如何实现一个宽度自适应，高度为宽度的一半的矩形。html

通过搜索引擎的筛选和本身的反复试验,发现使用padding-bottom是最完美的解决方案。搜索引擎

解决方案

首先咱们要明白，padding和margin都是相对于父元素的宽度来计算的，咱们能够利用这一属性来实现咱们的需求。spa

代码以下：.net

<div class="scale"></div>
复制代码

<style>
    .scale {
        width: 100%;
        height: 0;
        padding-bottom: 50%;
    }
</style>
复制代码

这其中的关键点就是height: 0;和padding-bottom: 50%;。code

咱们将元素的高度由padding撑开，因为padding是根据父元素宽度计算的，因此高度也就变成了相对父元素宽度，同时要将height设置为 0，这是为了将元素高度彻底交给padding负责。htm

最后padding-bottom的值设为width的值一半，就能够实现高度是宽度的一半且自适应啦。blog

改进

光是这样写仍是不够的，由于元素的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的时候就很麻烦了。如何解决呢？get

这时候咱们须要在外层再套一个父元素，将宽度的控制交给这个父元素来作。

代码以下：

<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>
复制代码

如此，就能够完美解决。

在线演示