如何缩放图像映射？

Question

希望我能很好地解释这一点，我有一个 1920 x 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;
}

Answer 1

我认为没有办法单独使用纯 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)

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

根据您的需要，您可以使用另一个公式。此外，该区域不必是矩形（参见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area）