热点在全屏背景与背景位置:中心

hotspots on full-screen backgrounds with background-position: center

本文关键字：背景 位置 中心 热点      更新时间：2023-09-26

我最近遇到了一个问题，当我试图将热点定位在全屏背景图像的顶部时，焦点在图像的中心(我研究了使用带有图像映射的内联图像，但不幸的是，由于网站的创作环境，这将不起作用)。

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

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

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

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

当前进度可在此查看:https://jsfiddle.net/k35opLvd/

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

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

http://codepen.io/agrayson/pen/vObLmZ?编辑= 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;
}
相关文章：