CSS实现宽度百分比，高度跟宽度一样的正方形效果

需要做一个简单的正方形照片墙效果，横向排列4张图片。需要自适应宽度，所以我使用css指定了宽度为25%，现如今需要使高度也跟宽度一样大，实现正方形的效果。

解决办法：

使用css中的padding-top以及position两个属性结合实现

原理：

padding-top的百分比是使用的父元素宽度的百分比,参考文章：https://www.w3school.com.cn/cssref/pr_padding-top.asp

代码：

html

<div class="box">
    <img src="./img.jpg" alt="">
</div>

css

.box{
    position: relative;
    float: left;
    width: 24%;
    padding-top: 24%;
    /*为了直观显示效果，加个边框*/
    border: 1px solid #000000;
}
.box img{
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
}

这里为了直观看到效果。我加了个1px的变宽，百分比修改为了24%，实际使用时根据自己需求变更

完整代码：https://gitee.com/lqccan/blog-demo/tree/master/%E5%89%8D%E7%AB%AF/%E6%AD%A3%E6%96%B9%E5%BD%A2%E7%85%A7%E7%89%87%E5%A2%99