JS轮播背景图超出屏幕，求SCSS适配多屏的正确方案

我用JavaScript实现了轮播背景图功能，代码如下：

var i = 0;
var images = [];
var slideTime = 3000; // 3 seconds

images [0] = 'https://images.unsplash.com/photo-1639254241780-09c10527eb37?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYxODR8&ixlib=rb-4.0.3&q=85';
images [1] = 'https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYzMTN8&ixlib=rb-4.0.3&q=85';
images [2] = 'https://images.unsplash.com/photo-1697490251825-0d6f7f3f7254?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYzOTl8&ixlib=rb-4.0.3&q=85';

function changePicture() {
  document.body.style.backgroundImage = "url(" + images[i] + ")";

  if (i < images.length - 1) {
    i++;
  } else {
    i = 0;
  }
  setTimeout (changePicture, slideTime);
}
window.onload = changePicture;

但发现图片会超出屏幕范围，我尝试用SCSS调整尺寸适配各类屏幕，但不知道怎么正确关联JS里的图片，以下是我写的错误SCSS代码：

.images>0>"https://images.unsplash.com/photo-1639254241780-09c10527eb37?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYxODR8&ixlib=rb-4.0.3&q=85";
.images>1>"https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYzMTN8&ixlib=rb-4.0.3&q=85";
.images>2>"https://images.unsplash.com/photo-1697490251825-0d6f7f3f7254?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYzOTl8&ixlib=rb-4.0.3&q=85"; {
background-size: cover;
}

希望得到正确的SCSS适配方法，解决图片超出屏幕的问题。

一、错误SCSS的问题 #

你写的SCSS完全不符合语法规范，不需要单独给每张图片写选择器——因为JS是直接给body设置backgroundImage，所以只需要给body设置背景相关的CSS属性就能统一控制所有轮播图的显示效果。

二、正确的SCSS代码 #

body {
  /* 确保body占满整个视口 */
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  /* 背景图适配核心设置 */
  background-size: cover; /* 等比例缩放图片，完全覆盖容器，裁剪超出部分 */
  background-position: center center; /* 图片居中，避免关键区域被裁剪 */
  background-repeat: no-repeat; /* 禁止图片重复平铺 */
}

三、可选的JS优化（更简洁规范） #

原JS代码可以简化，同时避免全局变量污染：

(function() {
  const images = [
    'https://images.unsplash.com/photo-1639254241780-09c10527eb37?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYxODR8&ixlib=rb-4.0.3&q=85',
    'https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYzMTN8&ixlib=rb-4.0.3&q=85',
    'https://images.unsplash.com/photo-1697490251825-0d6f7f3f7254?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYzOTl8&ixlib=rb-4.0.3&q=85'
  ];
  const slideTime = 3000;
  let currentIndex = 0;

  function changePicture() {
    document.body.style.backgroundImage = `url(${images[currentIndex]})`;
    currentIndex = (currentIndex + 1) % images.length;
    setTimeout(changePicture, slideTime);
  }

  window.onload = changePicture;
})();

关键说明 #

• background-size: cover：保证图片等比例缩放后完全覆盖body，不会留空白，超出屏幕的部分会被自动裁剪。
• background-position: center：让图片的中心区域始终显示在屏幕中央，避免人物、风景的核心部分被裁剪。
• 设置body的宽高为100vw/100vh，是为了让body铺满整个浏览器视口，确保背景图能完整覆盖屏幕。

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