希望我能很好地解释这一点，我有一个图像是1920*1080，它的比例取决于窗口大小。问题是图像映射不能缩放，坐标是绝对的，不能缩放，我该如何解决这个问题？

<img class="overimage" src="day1_roomstart.png" usemap="#overimage">

<map name="overimage">
    <area shape="rect" coords="451, 122, 658, 254" href="menu.html">
</map>

这也是CSS：

.overimage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  z-index: 10;
}

顺晟科技：

我不认为有一种方法可以单独使用纯HTML和CSS.但您可以通过利用JS中的ResizeObserver API来实现。

const image = document.querySelector('.overimage')
const area = document.querySelector('map[name="overimage"] > area')

function setCoords() {
 const width = image.clientWidth
 const height.value = image.clientHeight
 area.setAttribute('coords', `${width/4}, ${height/4}, ${3*width/4}, ${3*height/4}`)
 // or something else computed from height and width
}

setCoords()
new ResizeObserver(setCoords).observe(image)

当Area用于定义矩形可点击区域时，坐标为"x1, y1, x2, y2"。其中x1，Y1是图像内矩形左上角的坐标，x2，Y2是右下角的坐标。我上面的示例设置为矩形比图像小25%，同时保持居中。

取决于你想要什么，你会使用另一个公式。此外，该区域不必为矩形（请参见https：//developer.mozilla.org/en-us/docs/web/html/element/area）。