如何为与容器比例不同的图片实现平移缩放效果？

以下是修改后的完整代码，可适配任意比例的容器与图片，且能保证缩放后始终在容器内显示完整的目标区域：

function imageZoom(container, img) {
  // 预计算图片的显示比例和初始偏移
  let imgDisplayWidth, imgDisplayHeight, imgOffsetX, imgOffsetY;
  
  function calculateImageParams() {
    const containerRatio = container.offsetWidth / container.offsetHeight;
    const imgRatio = img.naturalWidth / img.naturalHeight;
    
    if (imgRatio > containerRatio) {
      // 图片更宽，按容器宽度缩放，垂直居中
      imgDisplayWidth = container.offsetWidth;
      imgDisplayHeight = container.offsetWidth / imgRatio;
      imgOffsetX = 0;
      imgOffsetY = (container.offsetHeight - imgDisplayHeight) / 2;
    } else {
      // 图片更高，按容器高度缩放，水平居中
      imgDisplayHeight = container.offsetHeight;
      imgDisplayWidth = container.offsetHeight * imgRatio;
      imgOffsetX = (container.offsetWidth - imgDisplayWidth) / 2;
      imgOffsetY = 0;
    }
  }

  // 初始化计算，窗口大小变化时重新计算
  calculateImageParams();
  window.addEventListener('resize', calculateImageParams);

  container.addEventListener("mousemove", onZoom);
  container.addEventListener("mouseover", onZoom);
  container.addEventListener("mouseleave", offZoom);

  function onZoom(e) {
    const offset = container.getBoundingClientRect();
    // 获取鼠标在容器内的坐标
    const mouseXInContainer = e.clientX - offset.left;
    const mouseYInContainer = e.clientY - offset.top;

    // 转换为鼠标在图片显示区域内的坐标（排除容器内的空白边距）
    const mouseXInImg = mouseXInContainer - imgOffsetX;
    const mouseYInImg = mouseYInContainer - imgOffsetY;

    // 计算鼠标在原图上的比例位置（0-1范围）
    const ratioX = mouseXInImg / imgDisplayWidth;
    const ratioY = mouseYInImg / imgDisplayHeight;

    // 缩放比例可自行调整
    const zoomScale = 2.5;
    // 计算缩放后的图片尺寸
    const zoomedImgWidth = img.naturalWidth * zoomScale;
    const zoomedImgHeight = img.naturalHeight * zoomScale;

    // 计算需要的平移量，确保放大区域不会超出容器边界
    const translateX = Math.max(
      container.offsetWidth - zoomedImgWidth,
      Math.min(0, container.offsetWidth * (0.5 - ratioX) * zoomScale)
    );
    const translateY = Math.max(
      container.offsetHeight - zoomedImgHeight,
      Math.min(0, container.offsetHeight * (0.5 - ratioY) * zoomScale)
    );

    // 组合平移与缩放变换
    img.style.transform = `translate(${translateX}px, ${translateY}px) scale(${zoomScale})`;
  }

  function offZoom(e) {
    img.style.transform = "translate(0, 0) scale(1)";
  }
}

核心逻辑说明 #

• 预计算图片显示参数：calculateImageParams函数根据容器与图片的宽高比，算出图片在容器内的实际显示尺寸、居中偏移量，窗口 resize 时自动重新计算，保证适配性。
• 坐标转换：将容器内的鼠标坐标，转换为图片显示区域内的坐标，再映射为原图的比例位置，确保鼠标指向的位置与原图区域精准对应。
• 平移范围限制：缩放后计算平移量，通过Math.max和Math.min限制边界，保证图片缩放后不会移出容器，始终显示完整的放大区域。
• 替换transformOrigin为translate：直接使用translate + scale的组合比单独设置transformOrigin更可控，避免比例差异导致的偏移问题。

使用注意事项 #

• 容器需设置overflow: hidden，隐藏超出容器的图片部分。
• 图片初始样式建议设置为max-width: 100%; max-height: 100%; object-fit: contain;，与代码中的适配逻辑匹配。

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