如何修复全屏背景图横向滚动仅显示部分的问题？

没问题！这其实是个挺常见的小需求，咱们直接调整一下CSS就能搞定～

你之前用background-size: cover的问题在于，它会强制把背景图片拉伸或裁剪来填满整个容器的宽高，所以横向的内容自然就被裁掉了。要实现横向滚动看完整图片，核心是让背景元素能容纳下整张图片的宽度，同时允许页面横向滚动。

给你修改后的代码：

.street {
  position: absolute;
  top: 0;
  left: 0; /* 移除原来的left:50%，避免元素居中偏移 */
  background: url('../img/street.svg') no-repeat left top;
  background-size: auto 100%; /* 高度铺满视口，宽度按图片原比例自适应 */
  width: auto; /* 让元素宽度自动匹配背景图片的实际宽度 */
  height: 100%;
  z-index: -2;
}

/* 确保页面可以横向滚动，去掉body默认的溢出限制 */
body {
  overflow-x: auto;
  margin: 0; /* 清除默认边距，避免滚动条位置偏移 */
}

简单解释下改动点： #

• 把background-size: cover换成auto 100%：这样图片高度会填满整个视口，宽度则保持原始比例，不会被裁剪；
• 移除left: 50%并设置left: 0：让背景元素从页面左侧开始，保证图片完整从左到右展示；
• 设置width: auto：让.street元素的宽度自动适配背景图片的实际宽度，而不是被限制在视口宽度内；
• 给body加overflow-x: auto：确保当图片宽度超过视口时，页面会出现横向滚动条，用户就能滚动查看完整的街道图了。

如果希望背景图片垂直方向始终居中，可以把background-position改成center top或者center center，根据你的需求调整就行～

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