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 demo3


如果文章对您有帮助的话,欢迎老板打赏↑↑↑(请我吃饭😋