HTML/JavaScript中如何随窗口缩放按比例调整图片相对窗口中心位置

我需要实现一个JavaScript函数，当窗口缩放时，按窗口缩放比例调整图片相对窗口中心的距离：若窗口宽度缩至原尺寸的70%，图片与窗口中心的水平距离也变为原距离的70%；若窗口高度缩至50%，垂直距离同样变为原距离的50%。该函数需基于图片中心计算位置以确保缩放准确。

我尝试了以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  </style>
</head>
<body>

<script>
var img = new Image();
img.src = "https://tier-list-cache.s3.us-east-2.amazonaws.com/movies)65.jpg";

function continuousSpacing(image) {
    let center = {
    x: window.innerWidth / 2,
    y: window.innerHeight / 2
    };
    let distance = {
    x: image.offsetLeft - center.x,
    y: image.offsetTop - center.y
    };

    function scaleImage() {
    let currentCenter = {
        x: window.innerWidth / 2,
        y: window.innerHeight / 2
    };
    let scale = {
        x: currentCenter.x / center.x,
        y: currentCenter.y / center.y
    };
    let newDistance = {
        x: distance.x * scale.x,
        y: distance.y * scale.y
    };
    image.style.left = currentCenter.x + newDistance.x + 'px';
    image.style.top = currentCenter.y + newDistance.y + 'px';
    }

    scaleImage();

    window.addEventListener('resize', scaleImage);
}
</script>
</body>
</html>

目前该函数存在问题：当窗口缩放时，图片会直接跳至窗口中心位置。

问题分析与修复方案 #

核心问题点

• 图片未添加到DOM且无定位：创建的图片元素没插入页面，默认static定位下left/top样式不生效，且offsetLeft/offsetTop始终为0，导致初始距离计算错误。
• 初始偏移量计算逻辑错误：应该基于图片的初始相对中心的比例偏移，而非固定像素值——窗口缩放时，比例是相对原窗口尺寸的，不是相对初始半宽。
• 缩放比例计算逻辑混淆：正确的缩放比例是当前窗口宽/原窗口宽、当前窗口高/原窗口高，而非半宽的比值（虽然数值相同，但逻辑不符合需求描述）。

修正后的完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    .positioned-img {
      position: absolute;
      /* 示例初始位置：相对于中心偏移20%窗口宽度、10%窗口高度 */
      left: calc(50% + 20vw);
      top: calc(50% + 10vh);
      /* 基于图片中心定位，抵消left/top的基准点偏移 */
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <img id="targetImg" class="positioned-img" src="https://tier-list-cache.s3.us-east-2.amazonaws.com/movies)65.jpg" alt="示例图片">

<script>
function continuousSpacing(image) {
    // 记录初始窗口尺寸（作为缩放基准）
    const originalWindow = {
        width: window.innerWidth,
        height: window.innerHeight
    };

    // 获取图片中心坐标
    const getImageCenter = (img) => {
        const rect = img.getBoundingClientRect();
        return {
            x: rect.left + rect.width / 2,
            y: rect.top + rect.height / 2
        };
    };

    // 计算初始时，图片中心相对窗口中心的偏移比例（相对于原窗口尺寸）
    const initialImgCenter = getImageCenter(image);
    const initialOffsetRatio = {
        x: (initialImgCenter.x - originalWindow.width / 2) / originalWindow.width,
        y: (initialImgCenter.y - originalWindow.height / 2) / originalWindow.height
    };

    function scaleImage() {
        const currentWindow = {
            width: window.innerWidth,
            height: window.innerHeight
        };
        const currentCenter = {
            x: currentWindow.width / 2,
            y: currentWindow.height / 2
        };

        // 根据当前窗口尺寸，计算新的偏移量
        const newOffset = {
            x: initialOffsetRatio.x * currentWindow.width,
            y: initialOffsetRatio.y * currentWindow.height
        };

        // 设置图片的新中心位置
        const newImgCenter = {
            x: currentCenter.x + newOffset.x,
            y: currentCenter.y + newOffset.y
        };
        image.style.left = `${newImgCenter.x}px`;
        image.style.top = `${newImgCenter.y}px`;
    }

    scaleImage();
    window.addEventListener('resize', scaleImage);
}

// 页面加载完成后初始化函数
window.addEventListener('load', () => {
    const img = document.getElementById('targetImg');
    continuousSpacing(img);
});
</script>
</body>
</html>

关键修改说明

• DOM插入与定位设置：图片提前插入页面，通过absolute定位+transform: translate(-50%, -50%)实现基于图片中心的定位逻辑。
• 基准比例记录：计算初始时图片相对窗口中心的偏移比例（而非固定像素），确保窗口缩放时偏移量始终按比例跟随窗口尺寸变化。
• 动态位置计算：每次窗口缩放时，用当前窗口尺寸乘以初始偏移比例，得到新偏移量，再结合当前窗口中心计算图片的新位置。

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