使用Flexbox实现Div内图片收缩及左一右二堆叠布局

嘿，我来帮你搞定这个布局问题！之前用Bootstrap 3固定尺寸导致图片被挤出页面的情况确实头疼，用Flexbox的弹性特性完全能解决，而且还能让图片自动缩放、保持宽高比，适配各种屏幕宽度。

核心实现思路 #

我们会用两层Flex容器来实现需求：

1. 外层容器控制左右两列的水平排列，屏幕变窄时自动换行
2. 右侧容器控制内部两张图片的垂直堆叠
3. 给图片设置自适应规则，确保它们随容器缩放且不丢失比例

完整代码示例 #

* { box-sizing: border-box; }

.content {
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-wrap: wrap; /* 屏幕宽度不足时自动换行 */
  gap: 1rem; /* 左右列之间的间距 */
  padding: 1rem;
  max-width: 1200px; /* 可选：限制容器最大宽度，避免大屏幕布局过宽 */
  margin: 0 auto; /* 可选：让容器在页面居中 */
}

.left-img {
  flex: 1 1 400px; /* 基础宽度400px，空间充足时自动拉伸占满可用宽度 */
}

.right-imgs {
  flex: 1 1 400px; /* 和左列保持一致的伸缩规则，保证两列宽度同步变化 */
  display: flex;
  flex-direction: column; /* 让内部图片垂直堆叠 */
  gap: 1rem; /* 右侧两张图片的垂直间距 */
}

/* 关键：让图片自适应容器并保持原始宽高比 */
.content img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 可选：如果图片比例不一致，用这个属性裁剪图片，保持容器填充效果 */
}

<div class="content">
  <div class="left-img">
    <img src="你的左侧图片地址" alt="左侧图片描述">
  </div>
  <div class="right-imgs">
    <img src="你的右侧上方图片地址" alt="右侧上方图片描述">
    <img src="你的右侧下方图片地址" alt="右侧下方图片描述">
  </div>
</div>

关键细节说明 #

• flex-wrap: wrap：这是响应式的核心，当屏幕宽度不足以容纳左右两列的基础宽度时，右侧列会自动换到左侧列下方，彻底避免图片被挤出页面的问题
• flex: 1 1 400px：这个复合属性的含义是：
  • 第一个1：剩余空间分配权重，左右列会平分多余的可用空间
  • 第二个1：空间不足时允许元素收缩
  • 400px：元素的基础宽度，你可以根据实际需求调整这个数值
• width: 100%; height: auto：强制图片宽度铺满所在容器，高度自动计算，完美保持原始宽高比，实现同步缩放
• gap：替代传统的margin来控制元素间距，代码更简洁，还能避免外边距折叠的问题

这样实现的布局，不管屏幕怎么缩放，图片都会跟着同步调整尺寸，始终保持布局的完整性，完全解决你之前遇到的问题～

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