滑块图片适配问题：修改宽高后失效、新增图片显示不全

问题描述 #

修改滑块容器宽高为85vw和65vh后，出现两个问题：

• 滑块功能异常
• 新增图片无法适配滑块尺寸，显示不全

原代码 #

JavaScript 部分 #

const slides = [
  {
    eachSlide: "url(https://www.consilium.europa.eu/media/54319/erasmus.png)",
  },
  {
    eachSlide: "url(https://unsplash.it/1900/1024/?image=291)",
  },
  {
    eachSlide: "url(https://unsplash.it/1900/1024/?image=786)",
  },
  {
    eachSlide: "url(https://unsplash.it/1900/1024/?image=768)",
  },
  {
    eachSlide: "url(https://unsplash.it/1900/1024/?image=726)",
  },
  {
    eachSlide: "url(https://unsplash.it/1900/1024/?image=821)",
  },
];

CSS 部分 #

.slider {
  width: 85vw;
  height: 65vh;
  overflow: hidden;
  position: relative;
  margin-top: 2%;
  margin-left: 5%;
}

.slider .each-slide {
  width: 100vw;
  height: 100vh;
  image-rendering: auto;
  float: left;
  line-height: 100vh;
  font-size: 40vh;
  text-align: center;
  background-size: cover;
  background-position: center center;
  background-color: transparent;
}

问题根源 #

1. 子元素尺寸不匹配：滑块容器宽高是85vw/65vh，但每个幻灯片(.each-slide)却设置为100vw/100vh，远超容器尺寸，导致图片显示不全，同时轮播逻辑（如位移、切换）会因为尺寸不匹配出现异常。
2. 冗余样式干扰：line-height、font-size等文字相关样式属于冗余设置，对图片幻灯片无意义，可能间接影响布局。

修复方案及修改后代码 #

调整 CSS 样式 #

核心是让幻灯片尺寸和容器完全匹配，同时优化冗余样式：

.slider {
  width: 85vw;
  height: 65vh;
  overflow: hidden;
  position: relative;
  margin-top: 2%;
  margin-left: 5%;
}

.slider .each-slide {
  width: 100%; /* 改为相对于父容器的100%宽度 */
  height: 100%; /* 改为相对于父容器的100%高度 */
  image-rendering: auto;
  float: left;
  background-size: cover; /* 保持覆盖容器，若要完整显示可改为contain */
  background-position: center center;
  background-color: transparent;
  /* 移除无意义的文字样式 */
}

同步调整轮播逻辑（若有） #

如果你的轮播是通过JS控制位移（如transform: translateX），确保位移计算基于容器的宽度，而非视口宽度：

• 错误示例：transform: translateX(-100vw)
• 正确示例：transform: translateX(-100%)（相对于父容器的100%宽度）

效果说明 #

• 图片会完全适配滑块容器尺寸，通过background-size: cover保证填满容器，background-position: center确保图片居中显示，裁剪部分边缘但保持视觉协调。
• 幻灯片尺寸与容器匹配后，轮播的切换逻辑会恢复正常，不会出现错位或功能异常。

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