Javascript 全屏背景上的热点，背景位置：中间

我最近遇到了一个问题，当时我试图在全屏背景图像上定位热点，焦点位于图像的中心（我曾研究过将内联图像与图像地图结合使用，但不幸的是，由于站点的创作环境，这将不起作用）

虽然我成功地将热点放入DOM中，并且当图像渲染比率与原始文件尺寸匹配时，热点会正确定位，但当图像开始缩放和裁剪以适应其容器时，热点会失去定位

我目前有热点以百分比来定位，但我不确定这是最好的方法，或者使用像素来代替

在尝试根据比率计算每个热点的x和y偏移量时，第46行和第49行出现了主要问题

if (windowAspectRatio > imageAspectRatio) {
    //yOffset = yPos - (yPos / (imageAspectRatio / windowAspectRatio));
    xOffset = 0;
} else {
    //xOffset = xPos - (xPos / (imageAspectRatio / windowAspectRatio));
    yOffset = 0;
}

目前的进展可以在这里看到：

---

-请注意，标记和样式以及图像大小必须保持当前状态。

由于图像是从中心缩放的，因此我们还需要从中心缩放热点：

if (windowAspectRatio > imageAspectRatio) {
  yPos = (yPos / imageHeight) * 100;
  xPos = (xPos / imageWidth) * 100;
} else {
  yPos = ((yPos / (windowAspectRatio / imageAspectRatio)) / imageHeight) * 100;
  xPos = ((xPos / (windowAspectRatio / imageAspectRatio)) / imageWidth) * 100;
}