如何让Flexbox内图片高度与最短图片保持一致？

要实现不裁剪图片、保持高度一致同时保留宽高比的需求，纯CSS无法自动获取最短图片的高度并应用，所以需要结合JavaScript来动态计算设置。以下是完整实现：

1. 优化CSS代码 #

* {box-sizing: border-box;}
.flex-container {
  display: flex;
  width: 90%;
  justify-content: center;
  margin: auto;
  align-items: flex-start; /* 避免容器默认拉伸，保证顶部对齐 */
}
.flex-image-container {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}
.flex-image-container:last-child {
  margin-right: 0; /* 移除内联样式，用CSS统一控制 */
}
.flex-image-container img {
  max-width: 100%;
  height: auto; /* 默认保持图片原始宽高比 */
}
.someButton {
  margin-top: 10px; /* 给按钮添加间距，提升美观度 */
}

2. 清理HTML代码 #

移除内联的margin-right样式，用CSS统一管理：

<div class="flex-container">
  <div class="flex-image-container">
    <img src="https://dummyimage.com/400x550/000/0011ff.png">
    <button class="someButton">Some Button</button>
  </div>
  <div class="flex-image-container">
    <img src="https://dummyimage.com/450x500/000/0011ff.png">
    <button class="someButton">Some Button</button>
  </div>
  <div class="flex-image-container">
    <img src="https://dummyimage.com/300x600/000/0011ff.png">
    <button class="someButton">Some Button</button>
  </div>
</div>

3. JavaScript动态设置高度 #

这段代码会等待所有图片加载完成，自动计算最短图片的高度，然后将所有图片的高度统一设置为该值，同时自动调整宽度以保留原始比例：

document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('.flex-image-container img');
  let loadedCount = 0;
  const totalImages = images.length;

  // 所有图片加载完成后执行高度设置
  function checkAllLoaded() {
    if (loadedCount === totalImages) {
      setUniformHeight();
    }
  }

  function setUniformHeight() {
    // 获取所有图片的原始高度
    const heights = Array.from(images).map(img => img.naturalHeight);
    // 找到最小高度值
    const minHeight = Math.min(...heights);
    // 给每个图片设置统一高度，宽度自动适配
    images.forEach(img => {
      img.style.height = `${minHeight}px`;
      img.style.width = 'auto';
    });
  }

  // 监听图片加载状态
  images.forEach(img => {
    if (img.complete) {
      loadedCount++;
      checkAllLoaded();
    } else {
      img.addEventListener('load', () => {
        loadedCount++;
        checkAllLoaded();
      });
    }
    // 处理图片加载失败的情况
    img.addEventListener('error', () => {
      loadedCount++;
      checkAllLoaded();
    });
  });
});

方案说明 #

• 无需手动指定高度，JavaScript会自动适配新增或更新的图片
• 完全保留图片宽高比，不会出现裁剪或拉伸变形
• 兼容图片加载延迟或失败的情况

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