獲取縮放圖像的高度

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％的像素大小）。