Before/After图片滑块异常求助：尺寸、边距及JS失效问题

我把你遇到的三个问题逐个拆解，修改点和原因都讲得直白点：

问题1：左侧图片比右侧大 #

原因：左侧的before图是绝对定位，参考的是外层的.led-container，但右侧的after图在.led-image-container里，两个容器的定位参考没对齐，加上before图的尺寸控制逻辑有漏洞。
修改点：

• 给.led-image-container加position: relative，让before图和after图用同一个容器做定位参考
• 给.led-image-before补全object-fit和object-position属性，和after图保持一致的显示规则

问题2：容器周围有大量内边距 #

原因：页面默认的body有margin，加上.led-container没限制宽度，导致它占满了视口宽度，而图片只有800px宽，所以两边空出大片区域。
修改点：

• 去掉body的默认margin和padding
• 给.led-container设置max-width: 800px，和图片容器的最大宽度对齐
• 给.led-main加一点左右内边距，避免窄屏时图片贴边

问题3：滑块JavaScript功能失效 #

原因：两个低级语法错误：

• 类选择器漏写了点：led-container应该写成.led-container
• addEventListener的参数之间少了逗号：('input' (e) =>要改成('input', (e) =>

修改后的完整代码 #

HTML（仅补全了闭合标签，其余和你的代码一致）

<main class="led-main">
  <div class="led-container">
    <div class="led-image-container">
      <img
        class="led-image-before led-slider-image"
        src="/images/products/multiservice-chilled-beams/led-lighting-replacement/101-new-cavendish-before-led-lighting-upgrade.jpg"
        alt="Before LED Lighting Upgrade" title="Image showing the project before the LED lighting upgrade"
        loading="lazy"
      />
      <img
        class="led-image-after led-slider-image"
        src="/images/products/multiservice-chilled-beams/led-lighting-replacement/101-new-cavendish-after-led-lighting-upgrade.jpg"
        alt="After LED Lighting Upgrade" title="Image showing the project after the LED lighting upgrade"
        loading="lazy"
      />
    </div>
    <input type="range" min="0" step="10" max="100" value="50" class="led-slider" aria-label="Percentage of before photo shown"/>
    <div class="slider-line"></div>
    <div class="led-slider-button" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#000000" viewBox="0 0 256 256"><path d="M136,40V216a8,8,0,0,1-16,0V40a8,8,0,0,1,16,0ZM96,120H35.31l18.35-18.34A8,8,0,0,0,42.34,90.34l-32,32a8,8,0,0,0,0,11.32l32,32a8,8,0,0,0,11.32-11.32L35.31,136H96a8,8,0,0,0,0-16Zm149.66,2.34-32-32a8,8,0,0,0-11.32,11.32L220.69,120H160a8,8,0,0,0,0,16h60.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,245.66,122.34Z"></path></svg>
    </div>
  </div>
</main>

CSS（修改点用注释标注）

/* 新增：清除页面默认边距 */
body {
  margin: 0;
  padding: 0;
}

.led-main{
  display: grid;
  place-items: center;
  min-height: 100vh;
  /* 新增：窄屏时给图片留左右空隙 */
  padding: 0 1rem;
}

.led-container{
  display: grid;
  place-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  --position: 50%;
  /* 新增：限制容器最大宽度，和图片容器对齐 */
  max-width: 800px;
}

.led-image-container{
  max-width: 800px;
  max-height: 90vh;
  aspect-ratio: 16/9;
  /* 新增：让before图相对于这个容器定位 */
  position: relative;
}

.led-slider-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 修改：图片居中显示，避免左右偏移 */
  object-position: center;
}

.led-image-before{
  position: absolute;
  inset: 0;
  width: var(--position);
  /* 新增：和after图保持一致的图片适配规则 */
  object-fit: cover;
  object-position: center;
}

.led-slider{
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.led-slider:focus-visible ~ .led-slider-button {
  outline: 2px solid black;
  outline-offset: 3px;
}

.slider-line{
  position: absolute;
  inset: 0;
  width: .2rem;
  height: 100%;
  background-color: #fff;
  z-index: 10;
  left: var(--position);
  /* 修复：漏写分号导致样式失效 */
  transform: translateX(-50%);
  pointer-events: none;
}

.led-slider-button{
  position: absolute;
  background-color: #fff;
  color: black;
  padding: .5rem;
  border-radius: 100vw;
  display: grid;
  place-items: center;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}

JavaScript（修复语法错误）

<script type="text/javascript">
// 修复：类选择器补全点号
const container = document.querySelector('.led-container');
// 修复：参数之间补全逗号
document.querySelector('.led-slider').addEventListener('input', (e) => {
    container.style.setProperty('--position', `${e.target.value}%`)
})
</script>

内容的提问来源于stack exchange，提问作者alistair.oakes