javascript - スケーリングされた画像の高さを取得する

Question

画像の元のサイズを取得しています。経由max-width:473px;で画像にCSSが適用され、高さはブラウザによって自動的にサイズ変更されます。しかし、画像の内側にload eventは、元のスケーリングされていないサイズが表示されます。

なので基本的に元の画像サイズは506x337cssルール後の画像になり473x315ます。315px内部の高さを取得するにはどうすればよいload eventですか?

アップデート

テスト用のスニペットがあります: http://jsfiddle.net/CXNan/

score 1 · Accepted Answer

これにより、コメント@質問に投稿したように、要素の計算された高さが得られます。

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

皆さんがすでに指摘したように、クロスブラウザーではありません (IE や古いものではありません)。

アップデート

このgetComputedStyle for IEを見つけましたが、まだテストできませんでした。http://ie.microsoft.com/testdrive/HTML5/getComputedStyle/が言うように、この「IE の getComputedStyle」が使用する古い IE API が呼び出されたため、問題ない可能性があります。currentStyle

currentStyle の唯一の問題は、生の値を返すgetComputedStyle一方で、可能であれば常にピクセル値を返すことです (そのため、css は、親の 50% のピクセルサイズではなく、50% を返します)。currentStylewidth:50%

score 0 · Accepted Answer

最大幅を縦横比で割ると、スケーリングされた高さが得られます。画像が最大幅より小さい場合、スケーリングは行われないことに注意してください。このようなもの：

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

3 に答える 3