解决Flexbox父容器内图片强制撑高容器的布局问题

问题核心是没给第二行的50%宽度区块（及内部图片）明确高度约束，导致图片按自身比例撑开父容器，打破了flex行内的高度统一。调整flex-shrink没用是因为它管的是空间不足时的收缩比例，和图片撑高容器的问题不相关。

直接按以下步骤修改：

1. 确保flex容器的align-items为stretch（默认就是这个值，要是被覆盖了就加上），保证同一行的所有子元素高度自动匹配。

2. 给所有图片的父容器（25%、50%宽度的区块）添加样式：

height: 100%;
overflow: hidden;

让父容器完全继承flex行的高度，不会被内部图片撑开。

3. 给所有图片添加样式：

width: 100%;
height: 100%;
object-fit: cover; /* 按需换成contain，前者裁剪填充满容器，后者完整显示图片、容器可能留空白 */

强制图片填满父容器，同时用object-fit保持比例，避免拉伸变形。

完整代码示例 #

HTML结构

<div class="grid-container">
  <!-- 第一行 -->
  <div class="grid-item item-25">
    <img src="your-image-path" alt="示例图片">
  </div>
  <div class="grid-item item-25">
    <img src="your-image-path" alt="示例图片">
  </div>
  <div class="grid-item item-25">
    <img src="your-image-path" alt="示例图片">
  </div>
  <div class="grid-item item-25">
    <img src="your-image-path" alt="示例图片">
  </div>
  <!-- 第二行 -->
  <div class="grid-item item-25">
    <img src="your-image-path" alt="示例图片">
  </div>
  <div class="grid-item item-25">
    <img src="your-image-path" alt="示例图片">
  </div>
  <div class="grid-item item-50">
    <img src="your-image-path" alt="示例图片">
  </div>
</div>

CSS样式

.grid-container {
  display: flex;
  flex-wrap: wrap;
  /* align-items: stretch; 默认值，可省略 */
}

.grid-item {
  height: 100%;
  overflow: hidden;
}

.item-25 {
  width: 25%;
}

.item-50 {
  width: 50%;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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