如何实现image map（图片映射）坐标随响应式图片同步缩放

解决方案 #

方案1：使用JavaScript动态适配image map坐标 #

实现逻辑

• 提前保存原始图片的宽高参数（你的图片尺寸为1920×1080）
• 页面加载、窗口尺寸变化时，计算图片实际渲染宽高与原始尺寸的缩放比例，同时适配object-fit: cover和居中定位带来的坐标偏移
• 动态更新所有<area>标签的coords属性值

代码实现

首先修改HTML的img标签，添加原始尺寸标记：

<img class="overimage" src="day1_roomstart.png" usemap="#overimage" 
     data-original-width="1920" data-original-height="1080">
<map name="overimage">
    <!-- 保留原始坐标即可，无需修改 -->
    <area shape="rect" coords="451, 122, 658, 254" href="menu.html" 
          data-original-coords="451,122,658,254">
</map>

新增JS逻辑：

function adjustImageMap() {
  const img = document.querySelector('.overimage');
  const originalW = parseInt(img.dataset.originalWidth);
  const originalH = parseInt(img.dataset.originalHeight);
  // 获取图片实际渲染的尺寸和位置
  const rect = img.getBoundingClientRect();
  const displayW = rect.width;
  const displayH = rect.height;

  // 计算object-fit: cover模式下的缩放比例
  const scale = Math.max(displayW / originalW, displayH / originalH);
  // 计算居中裁剪后的坐标偏移量
  const offsetX = (originalW * scale - displayW) / 2 / scale;
  const offsetY = (originalH * scale - displayH) / 2 / scale;

  // 遍历所有area标签更新坐标
  const areas = document.querySelectorAll('map[name="overimage"] area');
  areas.forEach(area => {
    const originalCoords = area.dataset.originalCoords.split(',').map(Number);
    const newCoords = originalCoords.map((coord, index) => {
      // 偶数位为x坐标，奇数位为y坐标
      if (index % 2 === 0) {
        return Math.round((coord - offsetX) * (displayW / (originalW * scale)));
      } else {
        return Math.round((coord - offsetY) * (displayH / (originalH * scale)));
      }
    });
    area.coords = newCoords.join(',');
  });
}

// 页面加载完成后执行适配
window.addEventListener('load', adjustImageMap);
// 窗口尺寸变化时执行适配，添加防抖避免频繁触发
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(adjustImageMap, 100);
});

方案2：替换image map为百分比定位的链接（更简单稳定，优先推荐） #

image map本身对自适应场景的支持很差，你可以直接用绝对定位的a标签代替area功能，不需要编写JS，适配更稳定：

实现步骤

• 给图片新增一个相对定位的父容器
• 移除原有的usemap属性和对应的<map>标签
• 添加和area功能一致的a标签，用百分比设置宽高和定位

代码示例

HTML部分：

<div class="img-container">
  <img class="overimage" src="day1_roomstart.png">
  <a href="menu.html" class="img-link"></a>
</div>

CSS部分：

/* 新增父容器样式 */
.img-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.overimage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 可点击区域样式，按原始坐标换算百分比 */
.img-link {
  position: absolute;
  /* 原始坐标451,122,658,254 对应1920宽、1080高的百分比 */
  left: calc(451 / 1920 * 100%);
  top: calc(122 / 1080 * 100%);
  width: calc((658 - 451) / 1920 * 100%);
  height: calc((254 - 122) / 1080 * 100%);
  /* 调试阶段可打开半透明背景确认位置，上线后删除即可 */
  /* background: rgba(255,0,0,0.3); */
}

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