如何让flexbox行内的所有图片始终保持相同高度？

要让五张logo在Flexbox中保持统一高度、宽度按自身比例自适应，只需要修改以下CSS属性：

修改要点 #

• 给图片设置固定高度+自动宽度，同时保持比例不变
• 调整Flex子项的属性，避免强制平分宽度

修改后的代码 #

HTML（无需改动） #

<div class="container">
  <div class="flex-container">
    <div><img src="https://www.toprival.com/temp/flexbox-test/one.webp" /></div>
    <div><img src="https://www.toprival.com/temp/flexbox-test/two.webp" /></div>
    <div><img src="https://www.toprival.com/temp/flexbox-test/three.webp" /></div>
    <div><img src="https://www.toprival.com/temp/flexbox-test/four.webp" /></div>
    <div><img src="https://www.toprival.com/temp/flexbox-test/five.webp" /></div>
  </div>
</div>

CSS #

.container {
  width:80%;
  border:1px solid gray;
  padding:30px;
  margin: 0 auto;
}

.flex-container {
  display: flex;
  align-items: center; /* 确保子项垂直对齐 */
}

.flex-container > div {
  margin: 0 10px;
  height: 80px; /* 统一设置子项高度，按需调整 */
  /* 去掉flex:1，避免强制平分宽度 */
}

.flex-container > div > img {
  height: 100%; /* 图片高度填满父容器 */
  width: auto; /* 宽度自动按比例计算 */
  object-fit: contain; /* 确保图片完整显示，不会被裁剪 */
}

原理说明 #

原来的代码中，flex: 1 1 50px会让所有Flex子项强制平分容器宽度，再加上img { width:100% }，导致图片被拉伸成相同宽度，高度自然不一致。

修改后：

1. 给每个图片父容器设置统一高度，图片通过height:100%继承这个高度
2. width:auto让图片根据自身宽高比自动计算宽度，不会被强制拉伸
3. object-fit:contain保证图片完整显示，不会因为容器高度限制而被裁剪
4. 去掉flex:1，让子项根据图片实际宽度自适应，不再强制平分空间

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