如何忽略SVG宽高比，将背景SVG拉伸至全屏窗口大小？

这个问题我之前也碰到过，核心问题在于你没明确指定背景图的尺寸规则，加上HTML和body的高度设置也需要补全，以下是可行的解决方案：

方案1：使用background-size: 100% 100%（最直接） #

你需要给背景图加上background-size: 100% 100%，这个值会强制背景图的宽度和高度完全占满容器的100%，完全忽略原有的宽高比。同时要确保html和body都占满窗口高度，因为默认情况下body的高度是由内容撑开的，不会自动占满窗口。

完整代码示例：

/* 先重置默认的margin和padding，避免出现滚动条或留白 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

html {
  background: url("image.svg") center / 100% 100% no-repeat;
}

或者拆分写法更清晰：

html {
  background-image: url("image.svg");
  background-position: center;
  background-repeat: no-repeat;
  /* 关键：强制宽度和高度都占满容器 */
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}

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

方案2：配合SVG内部的preserveAspectRatio属性（双重保障） #

如果你的SVG本身带有默认的preserveAspectRatio属性（默认值是xMidYMid meet，会保持宽高比），即使CSS设置了100% 100%，SVG内部的元素可能还是会保持比例。这时候你可以修改SVG文件的根元素，添加preserveAspectRatio="none"，确保SVG内部元素也完全拉伸：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none">
  <!-- 你的SVG内容 -->
</svg>

为什么你原来的代码不生效？ #

• 缺少background-size: 100% 100%：默认情况下背景图会以原始尺寸显示，不会自动拉伸。
• body高度未设置：仅设置html的height: 100%是不够的，因为body默认高度由内容决定，不会继承html的100%高度，导致背景图无法铺满整个窗口。

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