当窗口高度小于容器时，如何让SVG仅垂直单侧挤压而非双向缩放？

问题说明 #

当前SVG在容器宽高不足时会双向等比缩放，需求为：

• 窄宽度场景下，保留原有的双向等比缩放行为
• 窗口高度小于容器所需高度时，SVG仅垂直方向挤压（不保持宽高比，水平方向适配容器宽度）

解决方案 #

通过SVG的preserveAspectRatio属性结合CSS媒体查询实现：

• 默认使用preserveAspectRatio="xMidYMid meet"，确保宽度不足时SVG等比缩放，内容完整显示
• 当窗口宽高比大于SVG原始宽高比（7:5）时（即高度不足），切换为preserveAspectRatio="none"，让SVG拉伸填充容器，实现垂直方向挤压效果

修改后的完整代码 #

<!DOCTYPE html>
<html>

<head>
    <link href='http://fonts.googleapis.com/css?family=Astloch' rel='stylesheet' type='text/css'>
    <style>
        svg {
            display: block;
            border: 5px solid black;
            position: absolute;
            top: 5%;
            left: 5%;
            width: 90%;
            height: 90%;
            background: #fff;
        }

        .face {
            stroke: #000;
            stroke-width: 20px;
            stroke-linecap: round
        }

        /* 当窗口宽高比大于SVG原始宽高比（7:5）时，取消宽高比保持 */
        @media (min-aspect-ratio: 7/5) {
            svg {
                preserveAspectRatio: none;
            }
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="item1">
            <div class="flex-container">
                <div class="align-middle">
                    <div>DUI/DWI</div>
                </div>
                <div class="align-middle">
                    <div>CASE RESULTS / BLOG</div>
                </div>
                <div class="align-middle">
                    <div>CONTACT US</div>
                </div>
            </div>
        </div>
        <div class="item2">Left</div>
        <div class="item3">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. In vitae turpis
                massa sed elementum tempus egestas. Adipiscing at in tellus integer feugiat. Dolor sit amet consectetur
                adipiscing elit ut aliquam. Quis viverra nibh cras pulvinar mattis nunc. Eu turpis egestas pretium
                aenean pharetra magna ac placerat. Mauris cursus mattis molestie a. Imperdiet sed euismod nisi porta
                lorem mollis aliquam ut porttitor. Fermentum iaculis eu non diam. Pellentesque habitant morbi tristique
                senectus.
            </p>
        </div>
        <div class="item4">Right</div>
        <div class="item5">Footer</div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-350 -250 700 500" preserveAspectRatio="xMidYMid meet">
        <circle r="200" class="face" fill="red" />
        <path fill="none" class="face" transform="translate(-396,-230)"
            d="M487.41,282.411c-15.07,36.137-50.735,61.537-92.333,61.537         c-41.421,0-76.961-25.185-92.142-61.076" />
        <circle cx="-60" cy="-50" r="20" fill="#000" />
        <circle cx="60" cy="-50" r="20" fill="#000" />
    </svg>
    <script>
    </script>
</body>

</html>

原理说明 #

• preserveAspectRatio="xMidYMid meet"：默认行为，当容器宽高比小于SVG原始比例时，SVG等比缩放以适应容器，内容居中显示且完整
• 媒体查询min-aspect-ratio: 7/5：匹配窗口宽高比≥7:5的场景（此时容器高度相对不足），设置preserveAspectRatio="none"后，SVG会拉伸填充整个容器的宽高，实现垂直方向的挤压效果，水平方向保持容器宽度的适配

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