Flexbox底部三列图片尺寸不一致问题排查求助

问题核心原因 #

1. 图片容器top-img-container无固定尺寸约束，Flex布局下会随内部图片原始尺寸自适应，导致容器大小不一致
2. top-articles__col仅设置flex-basis:30%，但内部Flex元素（图片容器、文本容器）缺少明确的空间分配规则，Flex会根据内容自动调整
3. 全局img仅设置max-width:100%，未限制高度或强制保持比例，不同原始尺寸的图片缩放后高度失衡

修复方案（修改CSS代码） #

/* 调整顶部文章容器的间距控制 */
.top-articles {
  display: flex;
  justify-content: space-between;
  gap: 30px; /* 用gap替代margin，更稳定的列间距 */
}

/* 确保每列内部元素高度统一 */
.top-articles__col {
  flex-basis: 30%;
  display: flex;
  align-items: stretch;
}

/* 固定图片容器尺寸，防止自适应变形 */
.top-img-container {
  flex-shrink: 0; /* 禁止容器被压缩 */
  width: 100px; /* 可根据需求调整，对应200x254的比例缩小 */
  height: 127px; /* 保持200:254的宽高比 */
}

/* 强制图片按比例填充容器，避免变形 */
.top-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 让文本容器自动填充剩余空间 */
.top-articles-text {
  flex-grow: 1;
  margin-left: 20px;
}

修改说明 #

• gap:30px：替代justify-content:space-between的间距方式，避免边缘列与容器边界的间距异常
• align-items:stretch：让每列内部的图片容器和文本容器高度完全一致，消除列间高度差
• 固定top-img-container宽高：确保所有图片容器尺寸统一，从根源解决图片大小不一的问题
• object-fit:cover：保证图片按原始比例填充容器，不会出现拉伸或压缩变形
• flex-shrink:0：防止图片容器在空间不足时被挤压变形
• flex-grow:1：让文本容器自动占据列内剩余空间，保持布局整齐

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