如何让background-image自适应全屏且按比例缩放高度？

问题核心是你的容器高度未与背景图的宽高比绑定，导致缩放时高度无法同步变化。以下两种方案可解决该问题，完全符合使用background-image作为装饰元素的需求：

方法1：使用CSS aspect-ratio 属性（推荐，现代浏览器支持） #

该属性可直接定义容器的宽高比，与背景图比例匹配即可。假设你的SVG图宽高比为1920:160（可简化为12:1），代码如下：

.footerDeco {
  background-image: url(../resources/image_geometry_2.svg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw; /* 容器占满屏幕宽度 */
  aspect-ratio: 1920 / 160; /* 替换为你背景图的实际宽高比 */
}

• 将1920 / 160替换为你SVG的真实宽高比例，比如图宽1200px、高150px，可写1200/150或简化为8/1。
• width:100vw确保容器全屏，aspect-ratio会自动计算对应高度，屏幕缩放时宽高会按比例同步调整。

方法2：使用padding-top百分比实现比例（兼容旧浏览器） #

若需兼容不支持aspect-ratio的旧浏览器，可利用padding-top百分比基于容器宽度计算的特性：

.footerDeco {
  background-image: url(../resources/image_geometry_2.svg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 0; /* 清空容器本身高度，由padding-top撑出高度 */
  padding-top: calc(160 / 1920 * 100%); /* 计算高度占宽度的百分比：(图高/图宽)*100% */
}

• 同样替换160/1920为背景图的高宽比，比如计算得8.333%，可直接写padding-top:8.333%。
• 设置height:0是为了避免容器默认高度干扰，完全由padding-top控制高度。

额外提示 #

• 若不需要全屏宽度，只需占满父容器宽度，将width:100vw改为width:100%即可。
• 两种方案都能让容器高度随宽度按比例变化，background-size:cover会自适应填充容器，完美实现背景图同步缩放的效果。

内容的提问来源于stack exchange，提问作者José Alejandro Fernández