Question

我最近在尝试将热点放在全屏背景图像上时焦点位于图像的中心时遇到了问题（我使用带有图像映射的内嵌图像进行了研究，但遗憾的是由于网站的创作环境而无法正常工作。）

虽然我成功地将热点放入DOM中，并且当图像渲染比率与原始文件尺寸的比例匹配时，它们正确定位，当图像开始缩放并裁剪自身以适合它的容器时，热点失去了他们的定位。

我目前有热点以百分比定位，但我不确定这是最好的方法，还是可能使用像素。

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

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

目前的进展情况可以在这里看到：https://jsfiddle.net/k35opLvd/

- 注意标记和样式必须保持原样，以及图像大小。

Answer 1

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

http://codepen.io/agrayson/pen/vObLmZ?editors=001

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

全屏背景上的热点与背景位置：中心

1 个答案: