如何用Flexbox实现3张图片的2列布局：左图高度等于右侧两图总高度

直接用Flexbox结合object-fit属性就能解决你的问题，核心是让左右容器强制等高，同时约束图片适应容器尺寸，避免因图片固有比例撑开高度。

实现代码 #

HTML

<div class="image-container">
  <div class="col-left">
    <img src="left-img.jpg" alt="左侧图片">
  </div>
  <div class="col-right">
    <img src="right-top.jpg" alt="右上图片">
    <img src="right-bottom.jpg" alt="右下图片">
  </div>
</div>

CSS

/* 外层容器：Flex布局，让左右两列自动等高 */
.image-container {
  display: flex;
  width: 100%;
  gap: 10px; /* 可自定义图片间隙，按需调整 */
}

/* 左侧列：占1份宽度，高度由外层Flex自动拉伸 */
.col-left {
  flex: 1;
}

/* 左侧图片：填满容器，保持比例不溢出 */
.col-left img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁剪多余部分适配容器；用contain则完整显示但可能留空白 */
}

/* 右侧列：占1份宽度，垂直Flex布局让两张图上下堆叠 */
.col-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 右侧两张图的间隙，按需调整 */
}

/* 右侧图片：平分右侧列高度，自适应容器 */
.col-right img {
  flex: 1;
  width: 100%;
  object-fit: cover;
}

关键要点 #

1. 等高约束：外层flex容器默认align-items: stretch，会强制左右两列高度完全一致，解决右侧总高度溢出的问题。
2. 图片适配：object-fit: cover确保图片在容器内保持比例，不会因为自身宽高比撑开容器高度；如果需要完整显示图片，替换为object-fit: contain即可（可能出现空白区域，可给容器加背景色填充）。
3. 响应式适配：如果需要在小屏幕切换为单列布局，添加媒体查询：

@media (max-width: 768px) {
  .image-container {
    flex-direction: column;
  }
  .col-right {
    flex-direction: row;
  }
}

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