Flex图片行：移除多余Letterboxing及纯CSS解决方案问询

为什么Flexbox无法自动计算正确高度？ #

Flex容器的高度计算逻辑是基于子元素的最大高度贡献：默认情况下，Flex容器会根据最高的子元素来确定自身高度。当你给子元素设置max-height: 200px和height: 100%时：

• 对于本身高度≥200px的图片，会被缩到200px高，同时把Flex容器的高度拉到200px；
• 对于本身高度<200px的图片，height:100%会强制它们的盒子高度等于容器的200px，而object-fit:scale-down会保持图片的原始宽高比，只缩放至不超过盒子尺寸，因此图片实际高度仍为自身原高，上下就会出现空白（Letterboxing）。

Flexbox没有原生机制能将容器高度自动调整为所有子元素的最小高度（且不超过200px），因为它的布局逻辑优先满足子元素的最大尺寸需求，而非取最小值统一。

是否存在纯CSS解决方案？ #

目前没有完美的纯CSS方案能严格实现“所有图片统一使用min(200px, 行内最小图片高度)作为高度”的需求——因为CSS无法跨元素获取并计算一组兄弟元素的最小高度值。

如果可以接受图片高度不强制统一，仅限制最大高度为200px并保持比例，可使用简化的CSS：

.img-row {
  display: flex;
  column-gap: 5px;
}

.img-row img {
  max-height: 200px;
  width: auto;
  object-fit: scale-down;
}

但如果必须统一高度，你的JavaScript方案是目前最可靠的实现方式，它通过遍历计算行内图片的最小高度，动态调整容器的--img-max-height变量，确保所有图片都缩到统一高度且无空白。

完整优化示例 #

以下是整合了JS解决方案的完整页面代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>统一高度Flex图片行</title>
  <style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        display: flex;
        background-color: grey;
        justify-content: center;
        padding: 20px;
    }

    .img-row {
        --img-max-height: 200px;
        display: flex;
        column-gap: 5px;
        background-color: white;
        max-width: 800px;
        width: 100%;
        padding: 5px;
    }

    .img-row > * {
        max-height: var(--img-max-height);
        height: 100%;
        min-width: 0;
    }

    img {
        object-fit: scale-down;
        width: 100%;
        height: 100%;
    }
  </style>
</head>
<body>
  <div class="img-row"></div>

  <script type="module">
    async function squareWithBackground(width, height, colour) {
        const canvas = new OffscreenCanvas(width, height);
        const ctx = canvas.getContext('2d');

        ctx.fillStyle = colour;
        ctx.fillRect(0, 0, width, height);
        const side = Math.floor(Math.min(width, height) / 2);
        ctx.clearRect((width - side) / 2, (height - side) / 2, side, side);

        const img = document.createElement('img');
        img.src = URL.createObjectURL(await canvas.convertToBlob());
        return img;
    }

    const imgRow = document.querySelector('.img-row');
    const images = await Promise.all([
        squareWithBackground(200, 200, 'red'),
        squareWithBackground(200, 134, 'orange'),
        squareWithBackground(200, 120, 'green'),
        squareWithBackground(640, 480, 'blue'),
        squareWithBackground(640, 480, 'purple'),
    ]);
    imgRow.append(...images);

    // 动态计算并设置统一高度
    for (const r of document.querySelectorAll('.img-row')) {
        const minHeight = Array.prototype.reduce.call(
            r.children, 
            (currentMin, el) => Math.min(currentMin, el.naturalHeight || el.offsetHeight), 
            200
        );
        if (minHeight < 200) {
            r.style.setProperty('--img-max-height', `${minHeight}px`);
        }
    }
  </script>
</body>
</html>

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