CSS Flex Grid：如何匹配不同宽高比图片的高度？

你遇到的情况很常见——在Flex网格里混合不同宽高比的图片时，默认的width:100%会让图片撑满容器宽度，导致高度随比例各自变化，没法对齐。好消息是，不管是统一所有图片高度同时保留原比例，还是设置最大高度让宽度自适应，都能实现，下面给你两种针对性的方案：

方案一：强制统一所有图片高度，宽度按比例自适应 #

这个方案会让所有图片的高度完全一致，宽度根据自身比例自动调整，同时图片在容器内居中显示，绝对不会拉伸变形。

修改后的完整代码：

.root { width: 100%; max-width: 1200px; }
.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* 用gap替代原代码的无效负值padding，更规范地控制元素间距 */
  gap: 20px;
  padding: 0 10px;
}
.box1, .box2 {
  /* 设置统一的高度，也可以换成max-height实现弹性限制 */
  height: 180px;
  /* 让容器内部的图片居中对齐 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 保留原有的Flex布局属性，确保容器能自适应换行 */
  flex: 1 0 auto;
  min-width: 150px; /* 防止容器被压缩得太窄 */
}
img {
  height: 100%;
  width: auto;
  /* 可选：限制图片最大宽度不超出容器，避免过宽的图片撑破布局 */
  max-width: 100%;
  /* 保持图片原有比例，完整显示（如果需要裁剪填充容器，可换成object-fit:cover） */
  object-fit: contain;
}

<div class="root">
  <div class="container">
    <div class="box1">
      <img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
    </div>
    <div class="box2">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Aspect_ratio_-_16x9.svg/1200px-Aspect_ratio_-_16x9.svg.png" />
    </div>
    <!-- 其余HTML结构保持不变 -->
  </div>
</div>

关键细节说明： #

• 给.box1和.box2设置统一的height（或max-height），同时把它们变成Flex容器，让内部图片自动居中
• 图片用height:100%强制高度统一，width:auto让系统自动计算符合比例的宽度
• object-fit:contain确保图片完整显示，不会被拉伸或裁剪（如果想要图片填满容器，可替换为object-fit:cover）
• 原代码里的padding-left: -10px是无效的，CSS不允许padding为负值，用gap控制间距是更现代的做法

方案二：设置最大高度，图片自动适配（不强制统一高度） #

如果不想让所有图片高度完全一样，只是希望它们不超过某个最高高度，同时保持自身比例，这个方案更适合：

修改后的CSS代码：

.root { width: 100%; max-width: 1200px; }
.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px;
  padding: 0 10px;
}
.box1 { flex: 1 0 23%; min-width: 150px; }
.box2 { flex: 1 0 33%; min-width: 200px; }
img {
  max-height: 180px; /* 设置图片的最大高度上限 */
  width: auto;
  max-width: 100%; /* 确保图片宽度不超出容器范围 */
  display: block; /* 消除图片默认行内元素带来的底部空白间隙 */
}

关键细节说明： #

• 图片用max-height限制最高高度，width:auto让宽度按比例自动缩放
• max-width:100%防止宽比例的图片超出容器宽度
• display:block解决图片作为行内元素时底部的空白问题

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