如何缩放图像映射？

Question

希望我能很好地解释这一点，我有一张 1920 x 1080 的图像，它根据 window 大小进行缩放。问题是图像映射也不能缩放，坐标是绝对的，不能缩放，我该如何解决？

<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）

如何缩放图像映射？

how to scale image mapping?

html

css

imagemap