CSS-自适应正方形的实现

1、效果展示

                

        html结构如下：

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;
}