Question

我正在使用SVG背景图片，上面有SVG和HTML图层。我在屏幕调整大小时有SVG缩放确定，但有时在图像的两侧出现白色区域 - 例如短高度宽的宽度。

是否有办法缩放图像，保留纵横比，并强制图像适合宽度或高度，具体取决于哪个大于当前宽度/高度。例如，在屏幕高度较短且宽度较宽的情况下，人们看不到图像的底部，但图像会填满整个宽度。

最好使用CSS，香草JS也可以。

当前的HTML：

<html><body>
    <div class="container">
        <img class="svg_container" src="image.svg" id="svg_bg">
        <svg class="svg_container" id="svg_area"></svg>
        <div id='html_overlay'>
            <div id="heading_area">
                <h3>Some text</h3>
            </div></div></div></body></html>

css：

.svg_container {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden
}
#svg_bg {
    overflow:hidden;
    z-index: -1;
}
#svg_area {
    z-index: 1;
}
#html_overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 100;
}
body {
    font-family: sans-serif;
}

Answer 1

我相信这可能就是你要找的东西：

body {
    background: url(test.svg) no-repeat;
    background-size: 100vw auto;
}

@media (orientation: portrait) {
    body {
        background-size: auto 100vh;
    }
}

默认情况下，图像宽度将填充视图端口宽度（100vw）的100％，但如果页面的高度大于宽度（或具有横向方向），则会覆盖背景大小，以便图像高度填充视口高度的100％（100vh）。

缩放SVG背景以填充不带白色边框的屏幕，保留纵横比

1 个答案: