总体思路:由于height是不固定的,所以不能直接使用height值。因此转换思路使用width值来实现正方形的height赋值。
所以理论上只要能够将宽度属性应用在高度属性的方法都可以。
方案一:CSS3 vw 单位
.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 百分比相对父元素宽度计算 */
}
但它其实同样存在内容溢出的问题,这时候可以把内容放在另外的块中,使用绝对定位来消除空间占用。