HTML + 无法自动等比缩放热区，coords 值始终基于图片原始像素（naturalWidth/Height），CSS 缩放后必须用 JS 按缩放比重算坐标，否则点击错位。
直接说结论：HTML <map></map> + <area> 无法自动等比缩放热区，coords 值永远绑定原始图片像素，CSS 缩放图片后必须用 JS 手动重算坐标，否则点击必错位。
为什么 coords 不随 CSS 缩放自动适配
浏览器按规范把 <area> 的 coords 解释为原始图片（img.naturalWidth/img.naturalHeight）上的绝对像素位置。你写 coords="100,50,300,200"，不管图片被 CSS 缩成 200×150 还是 800×600，点击判定都发生在原图第 100 列、第 50 行那个点上。这不是 bug，是 HTML5 明确规定的坐标系行为。
常见错误现象：
– 图片设了 max-width: 100%; height: auto;，但热区只在桌面端准，手机一缩就点不中
– 设计稿给的是“缩放后坐标”，直接抄进 coords，结果所有区域整体偏移
– 用在线工具（如 image-map.net）导出时没选“原始尺寸”，坐标值本身就不对
- 用开发者工具临时加
border: 1px solid red到<img alt="HTML等比缩放图片区域映射教程" >，再截图比对热区框和实际点击反馈位置是否重合 - 打开控制台运行
console.log(img.naturalWidth, img.naturalHeight, img.offsetWidth, img.offsetHeight)，确认缩放比是否为预期值 - 别信“百分比 coords”——HTML5 已废弃
coords的百分比语法，只认整数像素
如何用 JS 动态重算 coords 实现等比缩放
核心是监听图片加载完成和窗口尺寸变化，拿到原始宽高与渲染宽高的比例，再按 shape 类型逐个缩放坐标值。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
实操建议：
– 记录原始尺寸：const naturalW = img.naturalWidth; const naturalH = img.naturalHeight;
– 计算当前缩放比：const scaleX = img.offsetWidth / naturalW; const scaleY = img.offsetHeight / naturalH;
– 遍历所有 <area>，根据 shape 属性分别处理：
-
rect：coords是"x1,y1,x2,y2"，全部乘对应缩放比（x1 *= scaleX; y1 *= scaleY; x2 *= scaleX; y2 *= scaleY） -
circle：coords是"cx,cy,r"，圆心cx/cy乘对应缩放比，半径r也乘（注意不是只乘一个） -
poly：coords是逗号分隔的x,y,x,y...序列，每对x,y都要分别乘scaleX和scaleY
必须绑定的事件：
– img.addEventListener('load', updateCoords)（防止图片未加载完就读取 naturalWidth）
– window.addEventListener('resize', updateCoords)（含横竖屏切换）
移动端和响应式布局下最容易漏的三点
这些不是边缘情况，而是每天都会触发的失效点：
-
<area>必须带href或onclick，光有coords不会响应点击；即使只用 JS 处理，也建议写href="#"并在 handler 中e.preventDefault()，否则部分安卓 WebView 或 iOS Safari 会意外跳转或滚动 -
alt属性不可为空，必须描述功能而非仅写“按钮”或“入口”，例如alt="点击进入儿科门诊预约"；缺alt会导致屏幕阅读器跳过该区域，旧版 Safari 直接忽略整个<area> -
<img alt="HTML等比缩放图片区域映射教程" >的usemap必须以#开头，且严格匹配<map></map>的name（不是id），大小写、空格、符号全要一致，否则整个映射逻辑静默失效
真正麻烦的不是计算本身，而是缩放比在不同设备上不一致：iOS Safari 的 devicePixelRatio 可能影响 offsetWidth 获取，某些安卓浏览器在 resize 事件里读 offsetWidth 会滞后一帧。如果你的热区精度要求高（比如医疗解剖图、工业图纸），别硬扛 <map></map>，直接换 SVG 或 canvas 方案更可控。
