CSS实现自适应正方形

在处理移动端页面时，我们有时需要将banner图做成与屏幕等宽的正方形以获得最佳效果。

方案一：CSS3   vw单位

css3中新增了一组相对于可视区域百分比的长度单位 vw,vh,vmin,vmax。

vw是相对于视口宽度的百分比， 1vw=1% viewport width

vh是相对于视口高度的百分比， 1vh=1% viewport height

vmin是相对于当前视口宽高中较小的一个百分比单位

vmin是相对于当前视口宽高中较大的一个百分比单位

 

利用vw单位，我们可以很方便的做出自适应的正方形：

.placeholder{
        width: 100%;
        height: 100vw;
    }

优点：简洁方便
缺点：浏览器兼容不好

 

方案二：设置垂直方向的padding撑开容器

在CSS盒模型中，一个比较容易被忽略的就是margin,padding的百分比数值计算。按照规定，margin、padding的百分比数值是相对父元素宽度进行计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：

.placeholder{
        width: 100%;
        padding-bottom: 100%;
    }

这种方案简洁明了，且兼容性好；但是填充内容后会出现问题，为了解决这个问题，我们可以设置容器的高度为 0

 

方案三：利用伪元素的margin(padding)-top撑开容器

在方案二中，我们利用百分比数值的 padding-bottom 属性撑开容器内部空间，但是这样做会导致在元素上设置的 max-height 属性失效

.placeholder{
        width: 100%;
        background: #0000FF;
        overflow: hidden;
    }
.placeholder:after{
        content: '';
        display: block;
        margin-top: 100%;    //当width=20%时，margin-top也是100%

}