代码如下
HTML:
<div class="square">
<div class="content">
Hello!
</div>
</div>
css:
.square {
position: relative;
width: 50%;
border: 4px solid red;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
See the Pen jxXeEB by Qing Sheng (@shengoo) on CodePen.
原理如下
在.square
中创建一个伪元素,使用padding-bottom: 100%;
,伪元素会用父级节点的宽度来计算100%,所以高度就是父级的宽度,这样就能实现正方形来。
同理,需要固定宽高比的情况下,都可以使用这种方式。