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).

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.

I currently have the hotspots positioning themselves in percentages, but I'm not sure this is the best approach, or to perhaps use pixels instead.

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

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.

回答1:

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

来源：https://stackoverflow.com/questions/31838514/hotspots-on-full-screen-backgrounds-with-background-position-center