HTML中area标签自适应插件的具体配置方法-html教程-PHP中文网

area标签无自适应能力，需用js监听图片加载和尺寸变化，按原始与显示尺寸比例重算coords值并取整，css无法替代此逻辑。

html中area标签自适应插件的具体配置方法

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

示例代码片段：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

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(',');
});
});</p>