如何使用Flexbox制作图片画廊，填充竖版风力涡轮机照片旁空白

我来帮你调整代码，用Flexbox实现能自动填充竖版图片旁空白的图片画廊。你的当前代码用了inline-block，这种方式在图片高度不一致时会留下空白，Flexbox可以很好地解决这个问题，同时保持响应式效果。

修改后的完整代码 #

CSS代码 #

.gallery {
  padding: 50px;
  /* 把画廊设为Flex容器，开启弹性布局 */
  display: flex;
  /* 允许容器内元素换行 */
  flex-wrap: wrap;
  /* 用gap设置图片间的间隙，比padding更精准 */
  gap: 20px;
}

.ImageTile {
  /* 控制图片容器的基础宽度与伸缩性：默认占50%宽度，减去gap的一半；空间多余时扩展，不足时收缩 */
  flex: 1 1 calc(50% - 10px);
  /* 设置最小宽度，避免容器过小导致图片变形 */
  min-width: 300px;
  overflow: hidden;
}

.ImageTile img {
  width: 100%;
  height: 100%;
  /* 让图片按比例填充容器，裁剪多余部分（避免拉伸变形） */
  object-fit: cover;
  /* 可选：添加悬停缩放效果，提升交互感 */
  transition: transform 0.3s ease;
}

.ImageTile img:hover {
  transform: scale(1.05);
}

@media only screen and (max-width: 1100px) {
  .gallery {
    padding: 5%;
    gap: 15px;
  }

  .ImageTile {
    /* 移动端每个图片容器占满宽度 */
    flex: 1 1 100%;
    min-width: auto;
  }
}

HTML代码（保持你原有结构即可） #

<div class="gallery">
  <div class="ImageTile"> <img src="/assets/Photography/Landscapes/1.jpg"> </div>
  <div class="ImageTile"> <img src="/assets/Photography/Landscapes/2.jpg"> </div>
  <div class="ImageTile"> <img src="/assets/Photography/Landscapes/3.jpg"> </div>
  <div class="ImageTile"> <img src="/assets/Photography/Landscapes/4.jpg"> </div>
  <div class="ImageTile"> <img src="/assets/Photography/Landscapes/5.jpg"> </div>
  <div class="ImageTile"> <img src="/assets/Photography/Landscapes/6.jpg"> </div>
</div>

关键改动说明 #

• Flex容器核心设置：给.gallery添加display: flex和flex-wrap: wrap，让图片容器能自动换行并填充可用空间，从根源解决inline-block的空白问题。
• 弹性宽度控制：.ImageTile的flex: 1 1 calc(50% - 10px)确保容器默认占一半宽度，同时能根据屏幕空间自动伸缩，适配不同尺寸。
• 图片比例优化：object-fit: cover让图片保持原始比例填充容器，不会出现拉伸变形，同时裁剪多余部分，保证所有容器高度一致。
• 间隙优化：用Flexbox的gap属性替代padding，避免容器边缘出现多余间隙，布局更整洁。

可选：不裁剪图片的自适应方案 #

如果希望竖版图片完整显示、不被裁剪，可以调整以下代码，让容器自动适应图片高度，下一行图片会自动填充上一行的空白：

.gallery {
  padding: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch; /* 让容器高度统一适配最高的图片 */
}

.ImageTile {
  flex: 1 1 calc(50% - 10px);
  min-width: 300px;
}

.ImageTile img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片完整显示 */
}

内容的提问来源于stack exchange，提问作者comsma