获取缩放图像的高度

Question

我正在获取图像的原始尺寸。通过max-width:473px;将css应用于图像，并且浏览器自动调整高度。但内部图像load event我得到原始的，非缩放大小。

因此，基本上原始图像尺寸为506x337，并且在css规则图像变为473x315后。我如何在load event内获得315px高度？

更新

有用于测试的片段： http://jsfiddle.net/CXNan/

Answer 1

您还可以使用

this.offsetHeight 

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

Answer 2

除以宽高比的最大宽度，你会得到缩放高度。请注意，如果图像小于最大宽度，则不会执行缩放。像这样：

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

Answer 3

这会给你你的元素的计算高度，因为我发布在评论@问题。

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

正如你们已经注意到的，不是跨浏览器（a.k.a.不是IE或老东西）。

---

更新

我发现这个getComputedStyle for IE，但无法测试它。 可能是可以的，因为http://ie.microsoft.com/testdrive/HTML5/getComputedStyle/说，较旧的IE API被称为currentStyle，这是“getComputedStyle for IE”使用。

用于currentStyle唯一的问题是，getComputedStyle将总是返回一个像素值，如果可能的，同时currentStyle返回原始值（因此width:50%上的CSS将返回50％，而不是母体的50％的像素大小）。