纯 css 实现容器动态宽高相等

发表于   |  

假设有这样的需求：不知道容器的宽度（容器宽不能写死，动态变化），如何只通过css让容器的高总是等于容器的宽？

可能大家会想到用height:100%，当然这肯定是不行的，height的百分比是根据父容器计算的，不是当前容器，根本满足不了我们的需求。

方法其实很简单，但是很巧妙。

我们需要知道的基础是，padding-top、padding-bottom的百分比是根据父容器的width（宽度）计算的，而不是height（高度）。

有了这个基础，我们就可以来实现了。我们的html结构是下面这样。

1
2
3
4
5
<div class="container">
    <div class="content">
        <!-- content here -->
    </div>
</div>

首先，我们需要一个子元素来将容器的高度撑开，样式如下：

1
2
3
4
5
.container:before {
    content: " ";
    display: block;
    padding-top: 100%; /*利用padding来撑开*/
}

然后，我们让实际的内容完全占满容器，样式如下：

1
2
3
4
5
6
7
.container {
    position: relative;
}
.container .content {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
}

这样就只用样式实现了高总是等于宽的容器。

因为padding-top的百分比是基于父容器width的计算，我们完全可以实现宽高是各种比例的容器。比如，高是宽的2倍、高是宽的1/2，则只需要修改样式为：

1
2
3
4
5
6
7
8
9
.container:before {
    content: " ";
    display: block;

    /* 2倍 */
    padding-top: 200%;
    /* 0.5倍 */
    padding-top: 50%;
}

实际的代码示例：http://runjs.cn/code/jqer8q5i

以上。

本文采用 知识共享署名 3.0 中国大陆许可协议，可自由转载、引用，但需署名作者且注明文章出处 。