本文详解如何通过 flexbox 构建响应式图片画廊，使每行图片自动缩放至统一高度、保持原始宽高比且不溢出容器，避免常见 cropping 和 overflow 问题。

本文详解如何通过 flexbox 构建响应式图片画廊，使每行图片自动缩放至统一高度、保持原始宽高比且不溢出容器，避免常见 cropping 和 overflow 问题。

在 Flexbox 布局中实现「等高但不裁剪」的图片画廊，关键在于控制容器高度 + 图片自适应缩放。单纯依赖 min-height: 100% 或 height: auto 会导致图片突破父容器（.art-item），因为此时 .art-item 高度未被约束，Flex 子项会按内容自然撑开，而 min-height: 100% 在无明确高度上下文时无效。

✅ 正确方案：为每个 .art-item 设置固定或动态的显式高度，再让图片以 height: 100% 等比缩放：

.art-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 推荐添加间距，提升可读性 */
}

.art-item {
  border: 2px solid #e74c3c;
  flex: 1 1 calc(33.333% - 8px); /* 每行最多3图，预留gap空间 */
  height: 200px; /* 关键：显式设定高度 */
  overflow: hidden; /* 可选：防止意外溢出 */
}

.art-item img {
  height: 100%;
  width: auto;
  display: block; /* 消除底部空白 */
  object-fit: contain; /* 更安全的替代方案（见下文） */
}

? 为什么 object-fit: contain 更推荐？
虽然 height: 100%; width: auto 能实现等比缩放，但它依赖父容器高度严格一致。若图片宽高差异极大（如极细长或极扁平），可能因小数像素渲染导致轻微错位。object-fit: contain 在固定尺寸容器内原生支持「完整显示+居中+保比例」，语义更清晰、兼容性更好（IE 除外，需加 polyfill）：

.art-item {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-item img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  /* 或直接使用 */
  /* object-fit: contain; */
  /* width: 100%; height: 100%; */
}

? 注意事项与进阶建议：

• 响应式适配：固定 height: 200px 不适合所有屏幕。推荐结合 CSS 自定义属性 + @media 或 JavaScript 动态计算：

  :root { --row-height: 200px; }
  .art-item { height: var(--row-height); }
  @media (max-width: 768px) { :root { --row-height: 150px; } }

• JavaScript 动态等高（可选）：若需每行根据实际最高图动态设高，可用 JS 获取每行元素并设置 min-height：

  document.querySelectorAll('.art-container').forEach(container => {
    const items = Array.from(container.children);
    const rows = []; // 按 flex 换行逻辑分组（需结合 getBoundingClientRect 判断 top 值）
    // 实现略 —— 生产环境建议用 CSS Grid 替代复杂 JS 计算
  });

• 替代方案提示：对强等高需求，CSS Grid 更直观：

  .art-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
  }
  .art-item { height: 200px; }

总结：Flexbox 实现等高图片画廊的核心是主动约束 .art-item 高度，而非依赖图片自身尺寸推导；配合 height: 100% 或 object-fit: contain 即可兼顾比例、完整性与布局稳定性。