1、效果展示
html结构如下:
<body>
<div class="card-box">
<div class="card"></div>
</div>
</body>
2、实现方法
(1)设置垂直方向的padding
在 CSS 中,margin 和 padding 的百分比是相对于父元素的宽度来计算的,利用这个特性,将 padding-top 或者 padding-bottom 设置为与 width 相同的百分比,再将 height 设为 0,最后通过定位可以实现自适应的正方形。
.card-box {
width: 25%;
height: 0;
padding-bottom: 25%;
position: relative;
}
.card {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: skyblue;
}
(2)伪元素after + padding
.card-box {
width: 25%;
position: relative;
}
.card-box::after {
content: '';
display: block;
padding-bottom: 100%;
}
.card {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: skyblue;
}
(3)使用vw
CSS3中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。vw 是相对于浏览器内部的可视区域(viewport)宽度的单位,1vw = 1% viewport width; 1vh = 1% viewport height。假设浏览器内部宽度为 1000px,那么 1vw = 10px。
.card-box {
width: 25%;
height: 25vw;
}
.card {
width: 100%;
height: 100%;
background-color: skyblue;
}