要实现响应式照片墙布局,可以使用CSS Grid布局或Flexbox布局。以下是使用CSS Grid实现响应式照片墙布局的示例代码:
HTML结构:
<div class="photo-grid">
<div class="photo"><img src="photo1.jpg"></div>
<div class="photo"><img src="photo2.jpg"></div>
<div class="photo"><img src="photo3.jpg"></div>
<div class="photo"><img src="photo4.jpg"></div>
<div class="photo"><img src="photo5.jpg"></div>
<div class="photo"><img src="photo6.jpg"></div>
<div class="photo"><img src="photo7.jpg"></div>
<div class="photo"><img src="photo8.jpg"></div>
<div class="photo"><img src="photo9.jpg"></div>
</div>
CSS样式:
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
.photo {
width: 100%;
height: 100%;
overflow: hidden;
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
解释:
auto-fit
可以让网格自动填充剩余空间,实现响应式布局;minmax(200px, 1fr)
表示列宽最小为200px,最大为1fr(剩余空间的一份),实现自适应宽度;grid-gap
可以设置网格之间的间距;.photo
设置为宽高100%和溢出隐藏,使图片按比例缩放并裁剪;object-fit: cover
可以让图片按比例缩放并填充整个容器。