我使用的是 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;
}
最佳答案
我相信这可能就是您正在寻找的:
body {
background: url(test.svg) no-repeat;
background-size: 100vw auto;
}
@media (orientation: portrait) {
body {
background-size: auto 100vh;
}
}
默认情况下，图像宽度将填充视口(viewport)宽度 (100vw) 的 100%，但如果页面的高度大于宽度(或横向)，则背景大小将被覆盖，以便图像高度填充视口(viewport)高度的 100% (100vh)。
关于html - 缩放 SVG 背景以填充屏幕，没有白色边框，保持纵横比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35248758/