纯CSS实现自适应正方形

有时候我们需要实现这种自适应不同手机屏幕的等宽正方形，如图： 刚开始自己很困惑，宽可以计算，那么高怎么随着宽的变化而变化呢？ 后来查阅相关材料总结出两种方法： 方案一：设置垂直方向的padding撑开容器 在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的。由此可以

>>阅读原文<<