网站首页滑块移动端无法完整显示的CSS修复咨询

我有一个网站首页的slider组件，大屏设备上图片适配正常，但移动端只能显示图片中间区域，无法完整适配屏幕。

笔记本端滑块视图 #

移动端滑块视图 #

当前笔记本端CSS代码 #

.rs-slider.style1 .slider-content.slide1 {
  background: url(assets/images/slider/h2-1.jpg);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.rs-slider.style1 .slider-content {
  padding: 250px 0;
}
*, ::after, ::before {
  box-sizing: border-box;
}

当前移动端CSS代码 #

.rs-slider.style1 .slider-content.slide1 {
  background: url(assets/images/slider/h2-1.jpg);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 767px) {
  .rs-slider.style1 .slider-content {
    padding: 175px 0;
  }
}

问题根源是background-size: cover属性——它会强制背景图片按比例缩放以填满容器，当移动端容器宽高比和图片宽高比差异较大时，图片边缘会被裁剪，仅显示中间区域。要完整显示图片，可按以下方式修改：

1. 在移动端媒体查询中调整背景样式，替换cover为contain，同时优化背景位置，可选添加背景色避免留白突兀：

@media only screen and (max-width: 767px) {
  .rs-slider.style1 .slider-content {
    padding: 175px 0;
  }
  .rs-slider.style1 .slider-content.slide1 {
    background-size: contain;
    background-position: top center;
    /* 可选：设置与图片底色接近的背景色，优化留白区域视觉效果 */
    background-color: #对应图片底色;
  }
}

2. 同时建议精简冗余的CSS代码，避免重复属性覆盖：

/* 精简后的基础样式 */
.rs-slider.style1 .slider-content.slide1 {
  background: url(assets/images/slider/h2-1.jpg) no-repeat center;
  background-size: cover;
}

如果使用contain后容器出现上下留白，可根据需求微调容器的padding值，或者使用专门的竖版适配图片，进一步提升移动端显示效果。

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