如何根据浏览器宽度自适应实现最多5张图片的响应式布局？

核心方案：Flexbox + 媒体查询 #

用Flexbox实现横向排列，结合媒体查询根据屏幕断点控制图片显示数量与尺寸，完全适配你要的需求：

1. HTML结构 #

先搭建基础的图片容器结构：

<div class="image-row">
  <div class="image-wrap">
    <img src="img1.jpg" alt="图片1">
  </div>
  <div class="image-wrap">
    <img src="img2.jpg" alt="图片2">
  </div>
  <div class="image-wrap">
    <img src="img3.jpg" alt="图片3">
  </div>
  <div class="image-wrap">
    <img src="img4.jpg" alt="图片4">
  </div>
  <div class="image-wrap">
    <img src="img5.jpg" alt="图片5">
  </div>
</div>

2. CSS核心样式 #

通过基础样式+断点控制实现响应效果：

/* 基础布局：默认隐藏所有图片，Flex横向排列 */
.image-row {
  display: flex;
  gap: 10px; /* 图片之间的间距，可自行调整 */
  width: 100%;
  padding: 0 10px;
}

.image-wrap {
  flex: 1;
  display: none; /* 默认隐藏，断点处按需显示 */
}

.image-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 保持图片比例，避免拉伸，可选contain */
  border-radius: 4px; /* 可选，美化边角 */
}

/* 移动端断点（<768px）：仅显示第一张图片，占满整行 */
@media (max-width: 767px) {
  .image-wrap:first-child {
    display: block;
    flex: 0 0 100%;
  }
}

/* 平板断点（768px-1199px）：显示前3张图片 */
@media (min-width: 768px) and (max-width: 1199px) {
  .image-wrap:nth-child(-n+3) {
    display: block;
  }
}

/* 桌面断点（≥1200px）：显示全部5张图片 */
@media (min-width: 1200px) {
  .image-wrap {
    display: block;
  }
}

3. 可选优化点 #

• 平滑过渡：给.image-wrap加transition: all 0.3s ease，让图片显隐更自然
• 性能优化：用srcset或<picture>标签加载对应屏幕尺寸的图片，减少带宽浪费
• 动态调整：如果需要根据容器宽度自动适配（而非固定断点），可以用CSS Grid的auto-fit + minmax实现更灵活的布局

内容的提问来源于stack exchange，提问作者Nicolas Dos Santos