如何在Flexbox中实现等高响应式图片画廊，避免图片溢出裁剪？

你当前的代码中，min-height: 100%会强制图片高度填满容器，但未限制宽度，导致图片超出容器范围。要实现每行图片等高、保持宽高比且不裁剪的效果，可以通过调整Flex容器和图片的样式来解决：

解决方案代码 #

<div class="art-container">
  <div class="art-item"> <img src='https://dummyimage.com/300x450/000/fff'></div>
  <div class="art-item"> <img src='https://dummyimage.com/600x400/000/fff'></div>
  <div class="art-item"> <img src='https://dummyimage.com/600x300/000/fff'></div>
  <div class="art-item"> <img src='https://dummyimage.com/600x400/000/fff'></div>
  <div class="art-item"> <img src='https://dummyimage.com/100x200/000/fff'></div>
  <div class="art-item"> <img src='https://dummyimage.com/200x100/000/fff'></div>
  <div class="art-item"> <img src='https://dummyimage.com/600x400/000/fff'></div>
</div>

.art-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 可选：添加图片间距 */
}

.art-item {
  border: 2px solid red;
  flex: 1 1 200px; /* 基础宽度200px，空间充足时拉伸，不足时缩小 */
  display: flex;
  align-items: center;
  justify-content: center; /* 可选：让图片在容器内居中 */
}

.art-item img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain; /* 确保图片完整显示，保持原始宽高比 */
}

关键样式说明 #

• flex: 1 1 200px：让每个图片容器具备响应式能力，最小宽度200px，自动填充剩余空间，同时换行时保持每行容器高度一致（Flexbox默认align-items: stretch）。
• max-height: 100% + max-width: 100%：限制图片最大尺寸不超出容器范围，避免溢出。
• object-fit: contain：确保图片完整显示，不会被裁剪，同时保持原始宽高比。如果希望图片填满容器且不拉伸（允许裁剪部分区域），可以替换为object-fit: cover，但你的需求是不裁剪，所以contain更合适。
• 给.art-item添加display: flex并设置居中属性，可以让图片在容器内垂直水平居中，优化视觉效果。

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