本文详解如何在 Flexbox 布局中让不同尺寸的图片在同一行内自动缩放至统一高度，同时严格保持原始宽高比且不溢出容器——核心在于为 flex 项目设置显式高度，并结合 height: 100% 与 width: auto 控制图片缩放。
本文详解如何在 flexbox 布局中让不同尺寸的图片在同一行内自动缩放至统一高度，同时严格保持原始宽高比且不溢出容器——核心在于为 flex 项目设置显式高度，并结合 `height: 100%` 与 `width: auto` 控制图片缩放。
要构建一个真正响应式的图像画廊，关键挑战在于：同一 flex 行内的所有图片需视觉等高，但又不能拉伸变形、不能裁剪、也不能突破父容器边界。原方案中仅用 min-height: 100% 和 width: auto 是无效的，因为 min-height: 100% 要求父元素有明确高度才能生效，而 .art-item 默认高度由内容决定，导致百分比计算失效，图片实际撑高容器并溢出。
✅ 正确解法是：为每个 .art-item 设置固定或动态的显式高度，再让图片填满该高度：
.art-container {
display: flex;
flex-wrap: wrap;
gap: 8px; /* 推荐添加间隙提升可读性 */
}
.art-item {
border: 2px solid #e74c3c;
flex: 1 1 auto; /* 允许弹性伸缩，避免强制单列 */
height: 200px; /* 关键：显式设定行内项目高度 */
overflow: hidden; /* 防止意外溢出（虽非必需，但更健壮） */
}
.art-item img {
height: 100%; /* 图片高度完全匹配容器 */
width: auto; /* 宽度按比例自适应，确保不拉伸 */
display: block; /* 移除默认 inline 间隙 */
object-fit: contain; /* 可选：确保完整显示（非 fill），推荐保留 */
}⚠️ 注意事项：
height: 200px是静态方案，适用于已知视口范围的场景；若需响应式动态高度（如根据屏幕宽度调整），必须借助 JavaScript 动态计算每行最大高度并统一赋值给该行所有.art-item；- 不推荐使用
flex: 1直接作用于.art-item而不设高度，否则无法触发图片的height: 100%；object-fit: contain是安全兜底策略，即使因 JS 计算误差导致微小偏差，也能确保图像完整可见；- 避免对
img使用min-height: 100%——它无法替代height: 100%在约束场景下的作用。
最终效果：所有图片按自身宽高比等比例缩放至统一高度（如 200px），宽度自适应，无裁剪、无溢出、无变形，且支持 flex-wrap 自动换行。对于多设备适配，建议配合媒体查询分段设置 .art-item 高度（如 @media (max-width: 768px) { .art-item { height: 150px; } }），兼顾性能与体验。
