调整图像大小，并使用javascript将其保持在原始位置。

Question

我一整天都在努力想办法调整图像的大小和计算比例。我基本上失败了！

来描述我的问题，对不起！但我什么都找不到..。下面是小提琴：http://jsfiddle.net/Saturnix/TkPX5/

如您所见，有一张带有沙发和羊的图像(如果没有，请尝试调整浏览器窗口的大小)。

现在，继续调整浏览器窗口的大小:您应该看到绵羊和沙发都被调整了大小。我只想让这些该死的羊呆在沙发上，在固定位置的上，就像它在沙发图像中被硬编码一样。不管窗户有多大，羊都必须呆在沙发上。

不，我不能用Photoshop把羊贴在上面。

在最后的项目中，我将有一个界面，而不是沙发，羊将是一个旋钮或按钮。

如果您想自己尝试，滚动javascript，直到您到达底部，您将看到一个"TODO“注释。

有两行代码可以改变羊的位置:您需要计算的所有其他参数都已经在上面的代码中了(至少我希望如此！)我只是想念公式。

我能够动态地调整绵羊的大小，并与沙发成比例:我如何才能对它的位置做同样的调整呢？我试过了！一切！但似乎没有什么是可行的：

非常感谢您提前！

编辑:似乎小提琴链接是错误的。修好了！

Answer 1

与其将x和y设置为固定值，还需要根据图像的新高度和宽度调整它们。

x = masterX + (50 * w / imm1.width);
y = masterY + (235 * h / imm1.height);

http://jsfiddle.net/TkPX5/12/