不同屏幕尺寸下图片点击位置适配问题技术求助

开发项目时，点击图片特定区域会放置标记点，但屏幕尺寸或高度变化后，标记点无法定位到原点击区域。当前算法基于原点击位置计算标记点，需要调整以适配屏幕变化，确保标记始终指向同一区域。注意：图片高度始终等于视口高度

原点击位置计算代码：

$(".largeimage").on("click", function(event) {
    var offset = $('.hotspot-inner').offset(),
          relativeX = event.pageX - offset.left,
          relativeY = event.pageY - offset.top;

    var height = $('.largeimage').height(),
        width = $('.largeimage').width();

    let hotspot = {
        x: relativeX / width * 100,
        y: relativeY / height * 100
    }
    console.log(hotspot)
});

原标记点显示代码：

var height = $('.largeimage').height(),
    width = $('.largeimage').width(),
    offset = $('.largeimage').offset(),
    parent_offset = $('.hotspot-inner').offset();
$(".info-icon-1").css({
  'top': hotspot.y * height / 100 + (offset.top - parent_offset.top) + 'px',
  'left': hotspot.x * width / 100 + (offset.left - parent_offset.left) + 'px'
})

原HTML结构：

<div class="hotspot-container">
  <div class="hotspot-inner" id="hotspot-manger">
    <img src="imgs/arrow1.png" alt="info" class="info-icon info-icon-1" data-target="pop1" data-x="38.19791714350382" data-y="45.84487534626039">
    <img src="imgs/large_image.png" alt="beautiful image" class="largeimage">
  </div>
</div>

核心问题在于标记点定位逻辑未适配图片的动态缩放比例，且未在屏幕尺寸变化时重新计算位置。以下是修正后的实现：

1. 优化点击位置存储逻辑 #

保留基于图片相对百分比存储坐标的逻辑，但确保计算基准是图片自身而非父容器，同时将坐标存入标记点的data属性以便复用：

$(".largeimage").on("click", function(event) {
    const $img = $(this);
    const imgOffset = $img.offset();
    const relativeX = event.pageX - imgOffset.left;
    const relativeY = event.pageY - imgOffset.top;
    const imgWidth = $img.width();
    const imgHeight = $img.height();

    const hotspot = {
        x: (relativeX / imgWidth) * 100,
        y: (relativeY / imgHeight) * 100
    };
    // 将坐标存入标记点的data属性
    $(".info-icon-1").data(hotspot);
    // 点击后立即更新标记点位置
    updateHotspotPosition();
});

2. 编写通用的标记点更新函数 #

创建可复用函数，统一处理标记点位置计算，确保基于图片当前渲染尺寸和容器偏移动态调整：

function updateHotspotPosition() {
    const $img = $(".largeimage");
    const $hotspot = $(".info-icon-1");
    if (!$img.length || !$hotspot.length) return;

    const imgWidth = $img.width();
    const imgHeight = $img.height();
    const imgOffset = $img.offset();
    const parentOffset = $(".hotspot-inner").offset();

    // 从data属性获取存储的百分比坐标
    const hotspotX = $hotspot.data("x");
    const hotspotY = $hotspot.data("y");

    // 计算标记点相对于父容器的定位值
    const top = (hotspotY / 100) * imgHeight + (imgOffset.top - parentOffset.top);
    const left = (hotspotX / 100) * imgWidth + (imgOffset.left - parentOffset.left);

    $hotspot.css({
        top: `${top}px`,
        left: `${left}px`
    });
}

3. 监听屏幕尺寸变化，实时更新 #

添加resize事件监听，结合防抖处理避免频繁计算，确保窗口大小变化时标记点自动修正位置：

$(window).on("resize", function() {
    clearTimeout(window.resizeTimer);
    // 250ms防抖，平衡响应速度与性能
    window.resizeTimer = setTimeout(updateHotspotPosition, 250);
});

// 页面加载完成后初始化标记点位置
$(document).ready(updateHotspotPosition);

关键修正说明 #

• 始终以图片当前渲染的宽高为计算基准，而非固定值
• 标记点位置基于父容器hotspot-inner偏移计算，避免页面滚动或容器布局变化影响定位
• 使用data属性统一存储百分比坐标，保证数据一致性
• 防抖处理resize事件，避免频繁触发计算导致性能问题

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