纯CSS实现自适应正方形

有时候我们需要实现这种自适应不同手机屏幕的等宽正方形，如图：

刚开始自己很困惑，宽可以计算，那么高怎么随着宽的变化而变化呢？

后来查阅相关材料总结出两种方法：

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

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

1 2 3 4

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