根据缩放背景图像定位和/或缩放 div答案

【问题标题】：Position and/or scale divs according to scaling background image根据缩放背景图像定位和/或缩放 div
【发布时间】：2011-04-21 17:12:05
【问题描述】：

我有一个根据浏览器窗口的高度/宽度按比例缩放的背景图像。我需要在这个背景上放置 div，这些 div 应该相对于背景图像定位。其中一些 div 还应根据背景图像进行缩放。最重要的是，这些 div 应该始终保持它们相对于背景图像的位置。

有点难为情，这有可能吗？非常感谢任何想法或提示。谢谢！

更新：这是一个说明我要实现的目标的 URL：http://production.bilbao.fi/bg_test/ 无论背景/视口有多大，粉红色框都应始终保持相同的坐标（相对于背景图像）。

【问题讨论】：

你能给我们贴一些代码吗？
所以渲染的背景会随着视口（浏览器窗口）的调整而调整高度和宽度？（我假设你是用 JavaScript 做的，不是吗？）所以你希望 div 也根据视口尺寸动态缩放？
是的，使用 JS（目前的 Supersize jquery 插件）来缩放背景。然后应根据背景/视口尺寸缩放 div。

【解决方案1】：

我打了一个快速演示，可能会给你一些想法：

【讨论】：

【解决方案2】：

你的意思是这样吗？

我不确定你将如何使用 Supersize 插件来处理它，因为它会裁剪图像以使其保持成比例，我想知道被剪掉的“热点”会发生什么 - 在我的示例中，我不是使用脚本只是将图像缩放到视口，这会扭曲它，但我想不出一种方法来让框在不相对于视口百分比的情况下进行缩放

只是回答，有一个想法，看看总体想法是否是创建可扩展的热点？

【讨论】：

是的，这正是我要寻找的，但在保持 div/热点的比例方面也很困难。
好吧，这很容易，因为我只是使用（视口）百分比来调整框的大小和位置，所以一切都在缩放 - 但是为了让它与插件 JS 脚本一起工作您必须对脚本进行逆向工程以了解它的比例并添加一些额外的脚本，以便您的 Boxes 相应地偏移和缩放 - 听起来不太容易；）