如何让div随图片尺寸自适应缩放以完整显示前后对比图？

核心思路 #

让mainSection容器根据图片实际尺寸自适应，同时设置图片以完整显示为优先，允许按比例缩放，彻底避免裁切问题。

1. CSS 样式调整 #

修改容器与图片的样式规则，确保容器包裹图片、图片按比例完整展示：

/* 主容器自适应图片尺寸 */
.mainSection {
  display: inline-block; /* 容器随内容宽度自动收缩 */
  position: relative;
  max-width: 100%; /* 限制最大宽度不超出父容器 */
  max-height: 80vh; /* 可选：限制最大高度，避免图片撑满视口 */
  overflow: hidden; /* 仅隐藏滑块超出部分，不裁切图片 */
}

/* 前后对比图片统一样式 */
.before-img, .after-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 关键：图片按比例完整显示，无裁切 */
}

/* 仅给前置图片设置滑块遮罩 */
.before-img {
  clip-path: polygon(0 0, var(--slider-position) 0, var(--slider-position) 100%, 0 100%);
}

/* 滑块基础样式（可根据需求调整） */
.slider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: #fff;
  cursor: ew-resize;
  transform: translateX(-50%);
}

2. JS 逻辑优化 #

确保图片加载完成后初始化容器尺寸，同时支持窗口 resize 自适应：

const mainSection = document.querySelector('.mainSection');
const beforeImg = document.querySelector('.before-img');
const afterImg = document.querySelector('.after-img');
const slider = document.querySelector('.slider');

// 初始化容器尺寸：取两张图片中较大的宽高作为基准
const initContainer = () => {
  const maxWidth = Math.max(beforeImg.naturalWidth, afterImg.naturalWidth);
  const maxHeight = Math.max(beforeImg.naturalHeight, afterImg.naturalHeight);
  
  mainSection.style.width = `${maxWidth}px`;
  mainSection.style.height = `${maxHeight}px`;
};

// 等待两张图片加载完成后执行初始化
const checkImagesLoaded = () => {
  if (beforeImg.complete && afterImg.complete) {
    initContainer();
  }
};
beforeImg.addEventListener('load', checkImagesLoaded);
afterImg.addEventListener('load', checkImagesLoaded);

// 窗口 resize 时重新计算尺寸
window.addEventListener('resize', initContainer);

// 滑块拖动逻辑（基于容器尺寸计算位置）
slider.addEventListener('mousedown', (e) => {
  const handleDrag = (moveEvent) => {
    const containerRect = mainSection.getBoundingClientRect();
    // 计算滑块相对容器的位置比例，限制在0-100%范围内
    const position = Math.max(0, Math.min(100, ((moveEvent.clientX - containerRect.left) / containerRect.width) * 100));
    mainSection.style.setProperty('--slider-position', `${position}%`);
    slider.style.left = `${position}%`;
  };
  
  const endDrag = () => {
    document.removeEventListener('mousemove', handleDrag);
    document.removeEventListener('mouseup', endDrag);
  };
  
  document.addEventListener('mousemove', handleDrag);
  document.addEventListener('mouseup', endDrag);
});

3. HTML 结构参考 #

确保容器正确包裹图片与滑块：

<div class="mainSection">
  <img src="before.jpg" alt="Before" class="before-img">
  <img src="after.jpg" alt="After" class="after-img">
  <div class="slider"></div>
</div>

关键说明 #

• object-fit: contain 是避免图片裁切的核心，它会按比例缩放图片，让图片完全适配容器，空白区域由容器填充。
• 容器使用inline-block可自动收缩至图片尺寸，配合max-width/max-height确保小屏幕下图片自动缩放。
• 必须等待图片加载完成后再初始化容器尺寸，避免因图片未加载导致尺寸计算错误。

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