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

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

解决办法:

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

原理:

padding-top的百分比是使用的父元素宽度的百分比参考链接

代码:

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/floow/blog-demo demo3

支付宝搜索:344355 领取随机红包

如果文章对您有帮助,欢迎给作者打赏