HTML中area标签自适应屏幕分辨率的解决方案-html教程-PHP中文网

area坐标不随图片缩放自动变化，因coords依赖绝对像素且未按显示宽高比动态重算；需用js监听img加载与窗口缩放，依naturalwidth/height与offsetwidth/height比例分别缩放x、y坐标。

html中area标签自适应屏幕分辨率的解决方案

area 坐标不会随图片缩放自动变化

HTML 的 <area> 标签依赖绝对像素坐标（coords 属性），而 <img> 用 width: 100% 或 max-width 缩放时，浏览器只拉伸图像本身，不重算 <area> 的坐标。结果就是：图片变小了，热区还卡在原位置，点不到、点偏、甚至完全失效。

用 JavaScript 动态重算 coords 值

核心思路是：记录原始图片尺寸和所有 area 的初始 coords，在窗口 resize 或图片加载完成时，按当前显示宽高与原始宽高的比例重新计算每个坐标值。

必须等 <img> 渲染完成再读取 naturalWidth/naturalHeight，不能只靠 offsetWidth/offsetHeight —— 它们可能受 CSS 干扰或未就绪
推荐监听 img.onload + window.addEventListener('resize', ...)，避免重复绑定
coords 是逗号分隔的数字字符串（如 "10,20,100,80"），需 .split(',').map(Number) 转数组再逐个缩放
缩放比例应分别取 img.offsetWidth / img.naturalWidth 和 img.offsetHeight / img.naturalHeight —— 宽高比不一致时（如图片被拉伸），x/y 必须独立计算

示例关键逻辑：

const img = document.querySelector('img');
const areas = document.querySelectorAll('area');
let initWidth, initHeight, initCoords = [];
<p>function updateAreas() {
if (!initWidth) return;
const scaleX = img.offsetWidth / initWidth;
const scaleY = img.offsetHeight / initHeight;
areas.forEach((area, i) => {
const coords = initCoords[i].map((v, idx) => 
idx % 2 === 0 ? Math.round(v <em> scaleX) : Math.round(v </em> scaleY)
);
area.coords = coords.join(',');
});
}</p><p>img.addEventListener('load', () => {
initWidth = img.naturalWidth;
initHeight = img.naturalHeight;
initCoords = Array.from(areas).map(a => 
a.coords.split(',').map(Number)
);
updateAreas();
});</p><p>window.addEventListener('resize', updateAreas);</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
														src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
													<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

注意 SVG 替代方案更可靠

如果项目允许替换技术栈，<svg></svg> 内嵌 <image></image> + <rect></rect>/<circle></circle> 热区天然支持响应式：viewBox 和 preserveAspectRatio 可保证图形与热区同步缩放，无需 JS 计算。