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

系统管理员 2022-01-19 02:05 260阅读 0赞

本文首发于[虾哔哔的Blog][Blog]

## 概述 ##

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

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

## 解决方案 ##

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

代码如下：

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

这其中的关键点就是`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>
    复制代码

## 继续改进 ##

解决了子元素的问题，那么我们再来看看元素本身。由于我们一开始的需求是宽高比 `2:1`,这种比较好实现，但是后来需求又想要 `16:9` 的宽高比，而且宽度不是 100%，那这样计算 `padding-bottom`的时候就很麻烦了。如何解决呢？

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

代码如下：

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

如此，就可以完美解决。

[在线演示][Link 1]

转载于:https://juejin.im/post/5b0784566fb9a07abd0e14ae

[Blog]: https://link.juejin.im?target=https%3A%2F%2Fblog.mrcxt.com%2Fcss%2FCSS%25E5%25AE%259E%25E7%258E%25B0%25E5%25AE%25BD%25E9%25AB%2598%25E7%25AD%2589%25E6%25AF%2594%25E4%25BE%258B%25E8%2587%25AA%25E9%2580%2582%25E5%25BA%2594%25E7%259F%25A9%25E5%25BD%25A2%2F
[Link 1]: https://link.juejin.im?target=http%3A%2F%2Fjsrun.net%2FymZKp%2Fedit