如何在按比例调整大小的图像中获取项目的新高度？答案

【问题标题】：How can I get the new height of an item inside a proportionally resized image?如何在按比例调整大小的图像中获取项目的新高度？
【发布时间】：2011-07-25 14:16:36
【问题描述】：

在一个网站上，我有一个占据整个浏览器窗口的图像，并固定在其重量上。这张图片有一些必须是可点击的对象，所以我在其各自的坐标上绘制了绝对定位的链接。我有一个 onResize 事件，可以相对于新窗口大小调整它们的大小，如下所示：

//org contains img size to get aspect ratio: [originalWidth, originalHeight]
W = area.w*$('.visor img').width()/org[0]
X = area.x*$('.visor img').width()/org[0]
H = area.h*$('.visor img').height()/org[1]
Y = area.y*$(window).width()/$(window).data('originalWidth')

因此，当您调整窗口大小时，该区域会根据新图像的大小正确调整大小，并正确定位在 X 轴上，而不是 Y 轴上。它总是比实际调整大小移动更多。

您可以假设，我为此使用了 JQuery，但我认为这个想法是可以理解的。

提前致谢。

【问题讨论】：

这些图像和链接如何放置在页面上的标记。
想象一个与窗口宽度相同的 IMG 标签，并在其上浮动一个绝对定位的 DIV。那个 div 包围了图片中的一张脸。当您调整浏览器的大小时，您希望 div 跟随脸部，保持脸部的大小和位置。好吧，除了正确的 Y 位置，我什么都得到了。

标签： javascript jquery html image-scaling

【解决方案1】：

您似乎缺少一组括号（我不确定为什么其他行似乎以这种方式工作，但我建议进行以下更改）：

area.y*$(window).width()/$(window).data('originalWidth')

...应该是

area.y*($(window).width()/$(window).data('originalWidth'))
      / \                                               / \
       |                                                 |

您正在重新计算每行上新旧图像尺寸之间的比率，这很容易出错，因为代码中的第四行正在尝试执行与前三行。我建议计算一次百分比变化，然后将所有值乘以该值。

【讨论】：

您是否删除了原始消息？我正要告诉你我已经这样做了 :P 并且，不是，即使有括号它也不起作用。另外，我还没有优化。当我完成这项工作时，我会担心诸如将计算缓存到变量中之类的事情。
我确实删除了我原来的答案。在你的cmets之后，似乎我离题太远了，所以我收回了它。我不确定可能出了什么问题。可能是因为您根据窗口的宽度调整大小？如果你只改变窗口的高度会怎样——这不会把事情搞砸吗？您可以发布代码计算的输出吗？也许那里的某些东西会揭示正在发生的事情。 IE。当 orignalHeight = A 时，resizedHeight = B.
我并不是建议将一次性计算作为一种优化（您节省的处理/内存量可以忽略不计），而是作为一种减少重复计算的方法，因此，可能发生错误的地方的数量。
如果你改变窗口高度，什么也不会发生；您只是或多或少地显示图像。它锚定到窗口宽度。

【解决方案2】：

也许它与您使用宽度作为高度有关？另外，我不确定从 $(window) 获取高度或宽度是否会对你有好处，也许获取 HTML 元素的高度和宽度会更好。

顺便说一句，使用百分比而不是固定位置不是更好吗？这样它由 CSS 而不是 JS 处理。但不确定它是否有效。

【讨论】：

我需要为脚本提供来自另一个来源的实际坐标，并且使用百分比会给我带来同样的问题：调整大小的图片中的元素不会以与图片本身相同的比例调整大小.