HTML热区map坐标，随图片大小自适应办法（javascript）

要实现HTML热区map坐标随图片大小自适应，可以通过以下步骤：

1. 在HTML中，为图片设置一个容器div，并将图片作为div的背景图。设置该div的宽度和高度，以及background-size为contain或cover，使图片大小自适应容器。

2. 使用JavaScript获取图片的实际宽度和高度，计算出图片缩放比例。

3. 遍历所有热区的坐标，将坐标乘以缩放比例，以适应图片缩放后的大小。

以下是示例代码：

HTML部分：

<div id="image-container">
  <img src="image.jpg" alt="" id="image" />
  <map name="hotspots">
    <area shape="rect" coords="10,10,50,50" href="#" />
    <area shape="rect" coords="60,60,100,100" href="#" />
  </map>
</div>

JavaScript部分：

const container = document.getElementById('image-container');
const image = document.getElementById('image');
const map = document.getElementsByName('hotspots')[0];

// 获取图片实际尺寸
const imgWidth = image.naturalWidth;
const imgHeight = image.naturalHeight;

// 计算缩放比例
const scaleX = container.offsetWidth / imgWidth;
const scaleY = container.offsetHeight / imgHeight;
const scale = Math.min(scaleX, scaleY);

// 遍历所有热区坐标，乘以缩放比例
const coords = map.getElementsByTagName('area');
for (let i = 0; i < coords.length; i++) {
  const coord = coords[i].getAttribute('coords').split(',');
  for (let j = 0; j < coord.length; j++) {
    coord[j] = Math.round(coord[j] * scale);
  }
  coords[i].setAttribute('coords', coord.join(','));
}

以上代码会根据图片实际大小和容器大小计算出缩放比例，然后遍历所有热区坐标，将坐标乘以缩放比例调整大小。