在网页开发中，大图搭配四个小图的布局是非常常见的图文展示形式，通常用于商品详情、资讯推荐等模块，下面我们就一步步实现这个效果。
基础HTML结构搭建
首先我们需要搭建对应的HTML结构，用一个外层容器包裹所有图片，内部先放一个大图元素，再放四个小图元素，结构如下：
<div class="img-layout">
<div class="big-img">
<img src="https://picsum.photos/600/400?random=2" alt="大图">
</div>
<div class="small-img-group">
<div class="small-img">
<img src="https://picsum.photos/300/200?random=3" alt="小图1">
</div>
<div class="small-img">
<img src="https://picsum.photos/300/200?random=4" alt="小图2">
</div>
<div class="small-img">
<img src="https://picsum.photos/300/200?random=5" alt="小图3">
</div>
<div class="small-img">
<img src="https://picsum.photos/300/200?random=6" alt="小图4">
</div>
</div>
</div>
基础CSS样式编写
接下来编写基础CSS样式，先设置外层容器的宽度，让大图和小图组横向排列，同时给图片设置合适的尺寸避免溢出：
.img-layout {
width: 900px;
margin: 20px auto;
overflow: hidden;
}
.big-img {
float: left;
width: 600px;
}
.big-img img {
width: 100%;
height: 400px;
object-fit: cover;
}
.small-img-group {
float: left;
width: 300px;
}
.small-img {
width: 100%;
height: 200px;
}
.small-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
使用flexbox优化布局
上面的浮动布局虽然在旧浏览器中兼容性较好，但是维护起来不够灵活，我们可以使用flexbox弹性布局来优化，代码更简洁，也更容易调整排列规则：
.img-layout {
width: 900px;
margin: 20px auto;
display: flex;
}
.big-img {
flex: 0 0 600px;
}
.big-img img {
width: 100%;
height: 400px;
object-fit: cover;
}
.small-img-group {
flex: 0 0 300px;
display: flex;
flex-wrap: wrap;
}
.small-img {
width: 100%;
height: 200px;
}
.small-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
常见问题说明
图片变形问题
如果图片原始比例和容器比例不一致，直接设置宽高会导致图片变形，这时候可以给img标签添加object-fit: cover属性，让图片覆盖容器同时保持比例，裁剪多余部分。
响应式适配问题
如果需要在移动端适配，可以给外层容器添加媒体查询，在小屏幕下让大图和小图组纵向排列，小图组改为两行两列排列：
@media (max-width: 768px) {
.img-layout {
width: 100%;
flex-direction: column;
}
.big-img {
flex: none;
width: 100%;
}
.big-img img {
height: 300px;
}
.small-img-group {
flex: none;
width: 100%;
}
.small-img {
width: 50%;
height: 150px;
}
}
布局效果调整技巧
如果需要调整大图和小图的间距，可以给对应元素添加margin属性，比如给小图组添加margin-left: 10px，给每个小图添加margin-bottom: 10px，就能得到合适的间距效果。如果需要调整大图和小图的高度比例，只需要修改对应容器的height属性即可，四个小图会自动平分剩余高度。