背景图片尺寸适配问题：长图适配屏幕异常如何解决？

你的问题出在容器尺寸没撑满整个视口，导致background-size: cover无法正常工作。按下面的步骤修改CSS就能解决：

1. 先确保容器的父元素（比如html和body）占满全屏：

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

如果是自定义的容器（比如一个div），直接给它设置：

.your-container {
  height: 100vh;
  width: 100vw;
}

2. 调整背景图的CSS代码：
   把你现有的代码替换成：

background-image: url('你的图片路径');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;

关键说明： #

• height: 100%和width: 100%让容器完全撑满父级空间，保证背景图有全屏的显示区域
• background-size: cover会让图片等比例缩放，完整覆盖容器，不会出现宽度只显示一半的情况
• background-position: center center能让图片居中显示，避免裁剪掉画面的重要部分

如果想要图片完整显示不裁剪，可以把background-size: cover换成background-size: contain，但这种方式可能会在容器边缘留下空白，根据你的需求选择即可。

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