Edge浏览器中Flexbox布局图片无法随窗口缩放问题求助

问题分析 #

看了你的代码，我发现问题主要出在两个关键点上：

1. 根元素高度未正确设置：你给body加了height: 100%，但没给html元素也设置高度，导致body的高度没有正确的参考基准，Flex布局的垂直对齐和容器尺寸计算会出问题。
2. Flex容器缺少宽度约束：.flex-container没有设置宽度限制，在Chromium内核的浏览器（Edge/Chrome）中，它无法自适应窗口宽度的变化，自然没法带动内部的图片一起缩放。

修复后的完整代码 #

我调整了你的CSS部分，你可以直接替换测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox with Images</title>
    <style>
        /* 给html和body同时设置高度，确保页面铺满视口 */
        html, body {
            display: flex;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: #f4f4f4;
        }
        .flex-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            gap: 20px;
            padding: 20px;
            /* 设置容器宽度为视口的90%，随窗口缩放 */
            width: 90%;
            /* 可选：限制最大宽度，避免窗口过宽时图片变形 */
            max-width: 1200px;
            background-color: #ffffff;
            border: 2px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .flex-container img {
            width: 100%;
            height: auto;
            /* 调整flex属性，确保图片按比例分配空间 */
            flex: 1 1 0;
            /* 可选：设置最小宽度，避免窗口过小时图片被挤得太窄 */
            min-width: 150px;
            margin: 0 10px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <img src="Images/OPC_1.jpg" alt="Image 1">
        <img src="Images/OPC_2.jpg" alt="Image 2">
        <img src="Images/OPC_3.jpg" alt="Image 3">
    </div>
</body>
</html>

关键调整说明 #

• html和body同步设置height:100%：让整个页面高度铺满视口，保证Flex布局的justify-content和align-items能正常生效。
• 给.flex-container设置width:90%：让容器自适应窗口宽度，当窗口缩放时，容器宽度变化会直接触发内部图片的缩放逻辑。
• 图片的flex属性改为flex:1 1 0：把flex-basis从auto改成0，强制图片基于分配的空间按比例缩放，而不是依赖自身原始尺寸，这是解决Chromium浏览器缩放问题的核心。
• 可选的min-width和max-width：用来优化极端场景下的显示效果，避免图片被过度压缩或拉伸变形。

这样修改后，Edge和Chrome里的图片应该就能随窗口正常缩放了，同时Firefox的原有表现也不会受到影响~

内容来源于stack exchange