CSS 实现自适应正方形

在处理移动端页面时，我们有时会需要将banner图做成与屏幕等宽的正方形以获得最佳的体验效果，比如，商品详情页，

方法1、CSS3 vw单位

CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width， vh 是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin 是相对当前视口宽高中 较小 的一个的百分比单位，同理 vmax 是相对当前视口宽高中 较大 的一个的百分比单位。该单位浏览器兼容性查看：https://caniuse.com/#search=vw

<div class="box"></div>

<style>

    .box{width: 100vw;height: 100vw;background: #F2DEDE;}

</style>

优点：简洁方便

缺点：浏览器兼容不好

方法2、设置垂直方向的padding撑开容器

在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。

按照规定，margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形

<div class="box"></div>

<style>

     .box{

        width: 100%;

        padding-bottom: 100%;/* padding百分比相对父元素宽度计算 */

        height: 0;//避免被内容撑开多余的高度

    }

</style>    

这种方案简洁明了，且兼容性好；但。。。可能碰上max-height不收缩，怎么办 ? 那就用方法3...

方法3、利用伪元素的 margin(padding)-top 撑开容器

<div class="box"></div>

<style>

    .box {width: 100%;overflow:hidden; background: #F2DEDE;}

    .box::after {content: "";display: block;margin-top: 100%;}

</style>

这里就涉及到margin collapse的概念，由于容器与伪元素在垂直方向发生了外边距折叠，所以我们想象中的撑开父元素高度并没有出现。而应对的方法是在父元素上触发 BFC：overflow:hiddden;

若使用垂直方向上的 padding 撑开父元素，则不需要触发 BFC，如下：

<div class="box"></div>

<style>

    .box {width: 100%;background: #F2DEDE;}

    .box::after {content: "";display: block;padding-top: 100%;}

</style>

注意：当元素内部添加内容时高度出现溢出，可以将内容放到独立的内容块中，利用绝对定位消除空间占用，如下：

<div class="container">

    <div class="box">内容</div>

</div>

<style>

    .container {width: 100%;background: #F2DEDE;position: relative;}

    .container::after {content: "";display: block;padding-top: 100%;}

    .container .box{position: absolute;width: 100%;height: 100%;}

</style>