缩放 SVG 背景以填充屏幕，没有白色边框保留纵横比答案

【问题标题】：Scale SVG background to fill screen without white borders preserving aspect ratio缩放 SVG 背景以填充屏幕，没有白色边框保留纵横比
【发布时间】：2016-05-16 21:11:14
【问题描述】：

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

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

最好用 CSS，vanilla 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;
}

【问题讨论】：

你说的是缩放<img> 对吗？
@styke。是的，下面的 CSS 运行良好。

标签： html css svg

【解决方案1】：

我相信这可能就是您正在寻找的：

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

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

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

【讨论】：