获取缩放后图像的高度

Question

我正在获取图片的原始尺寸。图片通过max-width:473px;应用了css样式，高度会被浏览器自动调整。但是在图片load事件中，我要获取原始、未缩放的尺寸。

因此，原始图像尺寸为506x337，而经过CSS规则后，图像变成了473x315。如何在load事件中获取315px的高度？

更新:

这里有一个测试片段: http://jsfiddle.net/CXNan/

- Somebody

---

请展示您正在使用的代码？ - adeneo

尝试过这个吗？window.getComputedStyle(document.getElementById("idOfYourImage"), null).getPropertyValue("height") - RaphaelDDL

啊哈！抱歉，实际上它正在工作。我已经将检查移到了加载内部。因此，似乎某些抽象层正在与图像搞错了什么。 - Somebody

@RaphaelDDL 你应该把那个作为答案发布。 - Jesse

已更新主贴并附上示例代码。 - Somebody

@Jesse 谢谢，我刚刚添加了一个我在IE上找到的可能解决方法。 - RaphaelDDL

Answer 1

您也可以使用

this.offsetHeight

请查看the fiddle。它包含只读的像素大小，请查看the reference。它在MSIE中得到支持，应该跨浏览器可靠。

- Jan Turoň

---

哇，的确是这样。我怎么错过了呢...谢谢 - Somebody

Answer 2

这将为您提供您的元素的计算高度，就像我在问题评论中发布的那样。

window.getComputedStyle(document.getElementById("idOfYourImage"), null).getPropertyValue("height")

正如你们已经注意到的，它不是跨浏览器（即不是IE或旧版本）。

---

更新

我找到了这个getComputedStyle for IE，但还没有测试过。 可能可以使用，因为http://ie.microsoft.com/testdrive/HTML5/getComputedStyle/说，旧的IE API称为currentStyle，而此“getComputedStyle for IE”使用它。

对于currentStyle的唯一问题是，getComputedStyle尽可能返回像素值，而currentStyle返回原始值（因此在css上width:50%将返回50％，而不是父级50％的像素大小）。

- RaphaelDDL

Answer 3

将最大宽度除以纵横比，即可得到缩放后的高度。请注意，如果图像小于最大宽度，则不会进行缩放。代码示例如下：

var height = img.width > 473 ? 473 / (img.width/img.height) : img.height;

- Niet the Dark Absol

---

我正在开发一个滑块，它无法知道另一个网站上设置的最大宽度是多少，例如。 - Somebody

你会如何编写能在其他网站上运行的 JavaScript 代码？ - Niet the Dark Absol

如果您使用 new Image，它会自动添加 width 和 height 属性。请尝试改用 document.createElement('img')。 - Niet the Dark Absol