CSS实现自适应的正方形

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

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

image.png

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

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

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

image.png

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

.placeholder {  height: 0;
}

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

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

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