css 弹性盒子和grid网格布局实现九宫格布局,每个格子的宽高一致(跟随页面宽度平分)。
效果图:高度设置为0,使用内间距100%,就可以将容器宽高的大小设置为一致。代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
·
效果图:
高度设置为0,使用内间距100%,就可以将容器宽高的大小设置为一致。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px 10px;
}
.item{
height: 0;
padding-bottom:100%;/*高度设置为0,使用内间距100%,将匡高设置为一致*/
position: relative;
}
img{
width: 100%;height: 100%;position: absolute;
object-fit: cover;/*预览图片的缩略图最好基于正中心显示*/
}
</style>
</head>
<body>
<div class="box">
<div class="item"><img src="https://pbs.twimg.com/media/FPp3nouUcAYNT7d.jpg" ></div>
<div class="item"><img src="https://pbs.twimg.com/media/FPp3nouUcAYNT7d.jpg" ></div>
<div class="item"><img src="https://pbs.twimg.com/media/FPp3nouUcAYNT7d.jpg" ></div>
<div class="item"><img src="https://pbs.twimg.com/media/FPp3nouUcAYNT7d.jpg" ></div>
<div class="item"><img src="https://pbs.twimg.com/media/FPp3nouUcAYNT7d.jpg" ></div>
</div>
</body>
</html>
更新:网格布局和弹性盒子的优化实现方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
/*弹性盒子实现*/
.imgColumn4{
overflow: auto;
display: flex;
flex-wrap: wrap;
padding: 5px;
}
.imgColumn4>div{
width:25%;
padding: 5px;
box-sizing: border-box;
}
.imgColumn4Box{
position: relative;
padding-top: 100%;
}
.imgColumn4Img{
position:absolute;
top:0;
left:0;
width:100% !important;
height:100% !important;
object-fit: cover;
}
/*grid网格布局实现*/
.imgGridColumn4{
display: grid !important;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
overflow: auto;
margin: 10px;
}
.imgGridColumn4Box{
position: relative;
padding-top: 100%;
}
.imgGridColumn4Img{
position:absolute;
top:0;
left:0;
width:100% !important;
height:100% !important;
object-fit: cover;
}
</style>
</head>
<body>
<h2>弹性盒子实现</h2>
<div class="imgColumn4">
<div>
<div class="imgColumn4Box">
<img class="imgColumn4Img" src="http://file.upload.dacxj.com/disasteradmin/tongchuanshi/yaozhouqu/miaowanzhen/pics/1c77749f65be417caf5bf2101d81ed8f.jpg" />
</div>
</div>
<div>
<div class="imgColumn4Box">
<img class="imgColumn4Img" src="http://file.upload.dacxj.com/disasteradmin/tongchuanshi/yaozhouqu/miaowanzhen/pics/1c77749f65be417caf5bf2101d81ed8f.jpg" />
</div>
</div>
<div>
<div class="imgColumn4Box">
<img class="imgColumn4Img" src="http://file.upload.dacxj.com/disasteradmin/tongchuanshi/yaozhouqu/miaowanzhen/pics/1c77749f65be417caf5bf2101d81ed8f.jpg" />
</div>
</div>
<div>
<div class="imgColumn4Box">
<img class="imgColumn4Img" src="http://file.upload.dacxj.com/disasteradmin/tongchuanshi/yaozhouqu/miaowanzhen/pics/1c77749f65be417caf5bf2101d81ed8f.jpg" />
</div>
</div>
<div>
<div class="imgColumn4Box">
<img class="imgColumn4Img" src="http://file.upload.dacxj.com/disasteradmin/tongchuanshi/yaozhouqu/miaowanzhen/pics/1c77749f65be417caf5bf2101d81ed8f.jpg" />
</div>
</div>
</div>
<h2>网格布局实现</h2>
<div class="imgGridColumn4">
<div class="imgGridColumn4Box">
<img class="imgGridColumn4Img" src="http://file.upload.dacxj.com/disasteradmin/tongchuanshi/yaozhouqu/miaowanzhen/pics/1c77749f65be417caf5bf2101d81ed8f.jpg" />
</div>
<div class="imgGridColumn4Box">
<img class="imgGridColumn4Img" src="http://file.upload.dacxj.com/disasteradmin/tongchuanshi/yaozhouqu/miaowanzhen/pics/1c77749f65be417caf5bf2101d81ed8f.jpg" />
</div>
<div class="imgGridColumn4Box">
<img class="imgGridColumn4Img" src="http://file.upload.dacxj.com/disasteradmin/tongchuanshi/yaozhouqu/miaowanzhen/pics/1c77749f65be417caf5bf2101d81ed8f.jpg" />
</div>
<div class="imgGridColumn4Box">
<img class="imgGridColumn4Img" src="http://file.upload.dacxj.com/disasteradmin/tongchuanshi/yaozhouqu/miaowanzhen/pics/1c77749f65be417caf5bf2101d81ed8f.jpg" />
</div>
<div class="imgGridColumn4Box">
<img class="imgGridColumn4Img" src="http://file.upload.dacxj.com/disasteradmin/tongchuanshi/yaozhouqu/miaowanzhen/pics/1c77749f65be417caf5bf2101d81ed8f.jpg" />
</div>
</div>
</body>
</html>
更多推荐
已为社区贡献42条内容
所有评论(0)