热点在全屏幕背景与背景位置：中心 [英] hotspots on full-screen backgrounds with background-position: center

问题描述

我最近遇到了一个问题，当尝试定位热点在全屏背景图像的焦点在图像的中心顶部（我研究使用内联图像与图像地图，但不幸的是，由于网站的创作环境而无法正常工作。）

I recently ran into a problem when trying to position hotspots on top of a full-screen background image with the focal point being at the center of the image (I looked into using inline images with image-maps, but unfortunately that will not work due the the authoring environment of the site).

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

Although I successfully have the hotspots being put into the DOM, and they position themselves correctly when the images rendered ratio matches that of the original file dimensions, when the image begins to scale and crop itself to fit it's container, the hotspots lose their positioning.

我目前有热点定位自己

主要问题出现在第46行和第16行。

The main issues occur on lines 46 & 49 when trying to calculate the x and y offset for each hotspot based on ratio.

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

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

Current progress can be seen here: https://jsfiddle.net/k35opLvd/

- 注意标记和样式必须

-Note that the markup and styles must stay as they currently are, as well as the image size.

推荐答案

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

since the image is scaling from the center, we also need to scale the hotspots from the center:

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;
}

这篇关于热点在全屏幕背景与背景位置：中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！