如何将background-image拉伸至100%宽度？问题求助与代码排查

我看了你的代码，问题出在背景图的容器.footer-img没有占据全屏宽度，导致背景图只能在子元素的固定宽度范围内显示。下面是具体的原因分析和修复方案：

问题根源 #

1. .footer-img作为背景图的承载容器，它的默认宽度是由子元素.container-footer的固定宽度（96rem）决定的，所以它无法扩展到屏幕的100%宽度，背景图自然也跟着被限制了。
2. 浏览器默认给body和footer添加了margin，这会导致屏幕边缘出现留白，进一步让背景图看起来没占满全屏。

修复后的CSS代码 #

/* 先清除全局默认的内外边距，避免屏幕边缘留白 */
body {
  margin: 0;
  padding: 0;
}

footer {
  width: 100%;
  margin: 0;
  padding: 0;
}

.footer-img {
  background-image: url(../assets/img/footer-splashes-01.svg);
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 100%; /* 强制容器占满屏幕宽度 */
  background-size: 100% 100%;
  min-height: fit-content; /* 确保容器高度足够容纳内部内容 */
}

.container-footer {
  width: 96rem;
  margin: 0 auto; /* 让固定宽度的内容容器在全屏背景里居中 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  text-align: right;
  padding-top: 25rem;
  padding-bottom: 5rem; /* 避免底部内容被背景图裁切 */
}

footer li {
  height: 8rem;
  list-style: none;
  text-decoration: none;
}

.social-media {
  padding-top: 5rem;
  display: flex;
  justify-content: space-between;
}

关键调整点 #

• 给.footer-img设置width: 100%，让它直接占满父元素（footer）的宽度，而footer也被设置为width: 100%并清除默认边距。
• 保留.container-footer的固定宽度，但用margin: 0 auto让它在全屏的.footer-img里居中，这样既保证了内容的固定宽度布局，又让背景图能铺满屏幕。
• 清除body和footer的默认margin，消除屏幕边缘的留白。

这样修改后，你的背景图应该就能完美拉伸到屏幕的100%宽度了！

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