如何在窗口缩放时保持叠加图片相对底图的位置与缩放？

要解决窗口resize时叠加图位置偏移、尺寸不匹配的问题，核心是用相对比例替代绝对像素值记录位置和尺寸，每次窗口变化时重新计算。以下是修改后的完整实现：

代码实现 #

HTML #

<div class="container">
    <div style="height: auto; padding: 3px 0 3px 0;">
        <div class="card">
            <div class="card_content">
                <h1>Map PNG Testing</h1>
                <div id="map1" class="responsive">
                    <img src="https://picsum.photos/seed/picsum/200/300" id="myImg" class="responsive">
                </div>
            </div>
        </div>
    </div>
</div>

CSS #

.responsive {
    position: relative;
    max-width: 1200px;
    width: 100%;
    height: auto; /* 保持图片原始比例，避免变形 */
}

.overlay-img {
    position: absolute;
    width: auto;
    height: auto;
    pointer-events: none; /* 避免叠加图遮挡底图点击事件 */
}

JavaScript #

window.addEventListener("load", function () {
    const baseImg = document.getElementById('myImg');
    const mapContainer = document.getElementById('map1');
    // 记录底图与叠加图的原始尺寸
    const baseNaturalSize = {
        width: baseImg.naturalWidth,
        height: baseImg.naturalHeight
    };
    const overlayNaturalSize = { width: 30, height: 30 };
    // 计算叠加图相对底图的尺寸比例
    const overlayRatio = {
        width: overlayNaturalSize.width / baseNaturalSize.width,
        height: overlayNaturalSize.height / baseNaturalSize.height
    };

    // 点击底图添加叠加图
    baseImg.onclick = function(event) {
        const overlay = new Image();
        overlay.src = 'https://picsum.photos/30/30?grayscale';
        overlay.classList.add('overlay-img');
        
        // 获取底图实时位置与尺寸
        const baseRect = baseImg.getBoundingClientRect();
        // 计算点击点在底图内的百分比位置
        const xPercent = (event.clientX - baseRect.left) / baseRect.width;
        const yPercent = (event.clientY - baseRect.top) / baseRect.height;
        
        // 存储相对位置数据
        overlay.dataset.xPercent = xPercent;
        overlay.dataset.yPercent = yPercent;
        
        // 初始化叠加图位置与尺寸
        updateOverlay(overlay);
        mapContainer.appendChild(overlay);
    };

    // 更新单个叠加图的位置与尺寸
    function updateOverlay(overlay) {
        const baseRect = baseImg.getBoundingClientRect();
        const xPercent = parseFloat(overlay.dataset.xPercent);
        const yPercent = parseFloat(overlay.dataset.yPercent);
        
        // 计算当前位置（让叠加图中心点对准点击位置）
        const left = baseRect.left + xPercent * baseRect.width - baseRect.width * overlayRatio.width / 2;
        const top = baseRect.top + yPercent * baseRect.height - baseRect.height * overlayRatio.height / 2;
        // 计算当前尺寸
        const width = baseRect.width * overlayRatio.width;
        const height = baseRect.height * overlayRatio.height;
        
        // 应用样式
        Object.assign(overlay.style, { left: `${left}px`, top: `${top}px`, width: `${width}px`, height: `${height}px` });
    }

    // 窗口resize时批量更新所有叠加图
    window.addEventListener('resize', function() {
        document.querySelectorAll('.overlay-img').forEach(updateOverlay);
    });
});

关键逻辑说明 #

1. 相对比例记录：

   • 点击时通过getBoundingClientRect()获取底图实时状态，计算点击点在底图内的百分比位置，替代固定像素偏移，确保窗口缩放后位置关系不变。
   • 提前计算叠加图与底图的原始尺寸比例，保证叠加图随底图同步缩放。

2. resize动态更新：

   • 监听窗口resize事件，遍历所有叠加图，根据底图当前尺寸重新计算每个叠加图的位置和大小。
   • 位置计算时减去叠加图自身尺寸的一半，让叠加图中心点精准对准点击位置（不需要可删除该部分逻辑）。

3. 样式优化：

   • 给叠加图添加pointer-events: none，避免遮挡底图的点击事件；将.responsive的height设为auto，确保底图始终保持原始比例缩放。

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