CSS实现自适应的正方形

总体思路：由于height是不固定的，所以不能直接使用height值。因此转换思路使用width值来实现正方形的height赋值。
所以理论上只要能够将宽度属性应用在高度属性的方法都可以。

方案一：CSS3 vw 单位

<div class="placeholder"></div>

.placeholder {  width: 50%;  height: 50vw;  background:green;
}

image.png

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

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

.placeholder {  width: 50%;  padding-bottom: 50%;  background:green;
}

但有一个问题，当内容有高度时，会高度溢出：

image.png

显然这就不是一个正方形了。结局方案是：

.placeholder {  height: 0;
}

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

这个其实和方案二思路一样，只不过使用伪元素副作用更小。
.placeholder {
width: 50%;
background:green;
}

.placeholder:after {
content: '';
display: block;
padding-top: 100%; /* margin 百分比相对父元素宽度计算 */
}
但它其实同样存在内容溢出的问题，这时候可以把内容放在另外的块中，使用绝对定位来消除空间占用。

作者：会飞小超人
链接：https://www.jianshu.com/p/da2826ca6c1a