area标签无自适应能力，需用JS监听图片加载和尺寸变化，按原始与显示尺寸比例重算coords值并取整，CSS无法替代此逻辑。
area标签本身不支持自适应，必须用JS手动缩放坐标
HTML的<area>标签没有响应式能力，它的coords属性是纯数字（如"10,20,100,80"），不会随图片缩放自动变化。所谓“area自适应插件”，本质是监听窗口尺寸或图片加载完成事件，按比例重算每个area的coords值。没有开箱即用的“配置项”，只有计算逻辑和触发时机需要你控制。
原生JS实现area坐标等比缩放的关键三步
不需要引入任何插件，几行JS就能搞定。核心是拿到原始图片尺寸、当前显示尺寸，再逐个更新area.coords：
- 用
img.naturalWidth和img.naturalHeight读取图片原始分辨率（不能用offsetWidth，那是渲染后尺寸） - 用
img.offsetWidth和img.offsetHeight读取当前显示宽高 - 遍历所有
area，把每个坐标值乘以scaleX = img.offsetWidth / img.naturalWidth和scaleY = img.offsetHeight / img.naturalHeight
示例代码片段：
const img = document.querySelector('img[usemap]');
const map = document.querySelector('map');
const areas = map.querySelectorAll('area');
<p>img.addEventListener('load', () => {
const scaleX = img.offsetWidth / img.naturalWidth;
const scaleY = img.offsetHeight / img.naturalHeight;</p><p>areas.forEach(area => {
const coords = area.coords.split(',').map(Number);
const scaled = coords.map((v, i) =>
i % 2 === 0 ? Math.round(v <em> scaleX) : Math.round(v </em> scaleY)
);
area.coords = scaled.join(',');
});
});resize时重新缩放area坐标的坑点
仅靠load事件不够——用户缩放浏览器、旋转手机、切换横竖屏都会让图片尺寸变化，area坐标立刻失效。但直接绑window.resize会频繁触发，尤其在移动端拖拽滚动时：
立即学习“前端免费学习笔记（深入）”；
- 别用
setTimeout做防抖，容易漏掉关键帧；推荐用requestAnimationFrame+ 标记位 - 只在图片尺寸实际变化时才重算（对比
img.offsetWidth前后值），避免无意义重绘 -
area坐标必须是整数，Math.round()不能省，否则某些浏览器（如IE11）会忽略非整数值 - 如果图片用了
object-fit: cover，就不能简单等比缩放——得先算出裁剪区域再映射，这种场景建议换用canvas或SVG
CSS无法替代JS处理area自适应
有人试图用transform: scale()或width: 100%让<map>跟着图片动，这是无效的：
-
<map>不是可渲染元素，它不占文档流，transform对它完全没作用 -
area坐标始终基于图片原始像素，CSS缩放只影响视觉，不改变coords语义 - 强行给
map加display: block或position: absolute只会让热区漂移，无法修复
真正可靠的路径只有一条：监听尺寸变化 → 读原始图尺寸 → 算缩放比 → 批量更新coords字符串。任何想绕过JS计算的方案，最后都会卡在iOS Safari点击失灵或IE11坐标偏移上。
