Flexbox中图片无法超原生分辨率放大的问题求助

核心逻辑 #

用CSS padding-top 百分比锁死容器宽高比（这个百分比是按父元素宽度计算的，刚好能实现固定比例），再把图片和SVG都改成绝对定位填充满容器，这样不管缩放还是放大，SVG都能精准盖在图片上，图片也能突破原生分辨率限制。

修正后的完整代码 #

HTML（先修复原代码的结构错误，<header>需放在<head>标签内） #

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="column">
        <div class="container">
            <img src="bitmap.png" alt="my_image">
            <svg viewBox="0 0 720 540">
                <rect x="0" y="0" width="100%" height="100%" 
                style="fill:none;stroke-width:6;stroke:rgb(0,0,255)" />
            </svg>
        </div>
    </div>
</body>
</html>

CSS #

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.column {
    height: 100%;
    width: 50%;
    background-color: lightgray;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container {
    position: relative;
    width: 100%;
    /* 720x540的比例：540/720=75%，锁死宽高比 */
    padding-top: 75%;
    flex-shrink: 0; /* 防止flex布局压缩容器 */
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 去掉object-fit: contain，让图片能拉伸超过原生分辨率 */
    /* 要是想保留图片比例不拉伸，就留着object-fit: contain，但容器会有留白 */
}

.container svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

关键改动说明 #

1. 锁死宽高比：.container的padding-top:75%对应原图4:3的比例，容器会自动跟着父容器宽度调整高度，永远保持这个比例，解决了之前缩放时比例混乱的问题。
2. 绝对定位对齐：把img和svg都设为绝对定位，直接填充满整个容器，两者尺寸完全一致，SVG再也不会错位。
3. 图片放大突破限制：去掉object-fit: contain后，图片会拉伸填充容器，就算超过原生720x540分辨率也能正常放大；要是想保持图片比例不裁切，就保留object-fit: contain，只是容器会有空白区域，SVG也会覆盖这些区域。
4. SVG防变形：给SVG加viewBox="0 0 720 540"，确保里面的矩形缩放时不会变歪，和图片完美对齐。

可选优化 #

• 要是不想容器超出父容器的可用空间，给.container加max-width:100%; max-height:100%;，防止溢出。
• 要是以后要换不同比例的图片，可以用JS动态计算padding-top的值（高度/宽度*100%），同时更新SVG的viewBox。

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