如何实现可随页面尺寸自适应缩放的图片对比滑块？

解决方案 #

可以实现自适应缩放需求，仅需调整CSS规则，原有JS逻辑几乎不需要修改，修改点如下：

1. 修正容器样式错误 #

你原有.wrapper规则中重复定义了两次max-height，将第二个max-height改为max-width: 100%，保证容器宽度不会超出视口范围：

.wrapper {
  height: 85vh;
  width: 57vh;
  max-height: 850px;
  max-width: 100%; /* 替换原重复的max-height属性 */
  position: relative;
}

2. 统一两张对比图的背景规则 #

不要使用background: round，改用固定的背景定位+缩放规则，保证两张图在任何尺寸下都完全对齐，不会出现错位变形：

/* 共用背景规则，保证两张图对齐 */
.wrapper .images .img-1,
.wrapper .images .img-2 {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}
/* 分别设置两张图的背景地址 */
.wrapper .images .img-1 {
  background-image: url("2.jpg"); /* 调整后版本的图片 */
}
.wrapper .images .img-2 {
  background-image: url("1.jpg"); /* 调整前版本的图片 */
  overflow: hidden; /* 关键属性：宽度变化时仅裁剪显示区域，背景不会跟着缩放 */
}

3. 可选优化（避免窗口缩放时滑块错位） #

如果需要窗口尺寸变化时滑块位置保持对应显示比例，仅需在原有JS代码后新增几行监听逻辑即可：

const slider = document.querySelector(".slider input");
const img = document.querySelector(".images .img-2");
const dragLine = document.querySelector(".slider .drag-line");
// 原有滑块逻辑保留
slider.oninput = ()=>{
  let sliderVal = slider.value;
  dragLine.style.left = sliderVal + "%";
  img.style.width = sliderVal + "%";
}
// 新增窗口缩放监听
window.addEventListener('resize', () => {
  const sliderVal = slider.value;
  dragLine.style.left = `${sliderVal}%`;
  img.style.width = `${sliderVal}%`;
})

修改完成后组件就可以完全随页面尺寸自适应缩放，滑块功能也不会受影响。

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