如何仅拉伸CSS背景图宽度？维持高度不变并置于容器底部

嗨，刚好能帮你搞定这个需求！你要的效果是把背景图固定在容器底部，保持高度按原图比例不变，同时宽度拉伸填满容器，只需要调整background-size属性就可以轻松实现啦。

调整后的CSS代码 #

针对你的HTML结构，假设你是把背景图放在<section id="sec-feature-polling">上，修改后的CSS应该是这样：

#sec-feature-polling {
  background: url('images/poll-graph.svg') no-repeat center bottom;
  /* 关键：宽度占满容器，高度按原图比例自动适配 */
  background-size: 100% auto;
  /* 必须给容器设置明确高度，否则背景图无法正常显示 */
  min-height: 300px; /* 替换成你实际需要的高度值 */
}

关键属性解释 #

• background-size: 100% auto;：第一个值100%让背景图的宽度完全拉伸至容器的宽度；第二个值auto会根据原图的高宽比例自动计算高度，这样就实现了你要的「保持当前高度不变」的效果（不会让图片高度被强制压缩或拉伸变形）。
• 一定要给容器设置min-height或者固定height，因为背景图是依附于容器存在的，没有高度的容器无法展示背景图。

补充说明 #

如果你的背景图是要放在内部的.container上，只需要把CSS选择器换成.container就行，逻辑完全一致。另外你用的是SVG矢量图，拉伸后不会出现模糊的问题，非常适合这种场景~

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