[1] JavaScriptで画像の本来の幅と高さを取得する - inamenaiの日記 ( 版) <http://d.hatena.ne.jp/inamenai/20081011/p1>
ブラウザによって画像の読み込みが完了するタイミングはまちまちのようなので、上記のようにloadが完了してからプロパティを参照するようにしたほうが無難です(参考:Safariでは画像のloadが終わっていないとwidth、heightがうまく取得できない at HouseTect, JavaScripter Blog)。
ただしこのプロパティはIEでは使えないので、IEの場合は新しいImageオブジェクトを生成してそのオブジェクトのプロパティから幅と高さを取得します。
この場合も、やはりロードを待ってからプロパティを見に行くようにしたほうが安全です。
[2] JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log ( 版) <http://d.hatena.ne.jp/uupaa/20090602/1243933843>
Firefox, Safari, Google Chrome なら
image.naturalWidth と image.naturalHeight を利用します。
image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
IE なら
runtimeStyle を利用します。
runtimeStyle は CSS の !important をプログラマブルにエミュレートする機構です。
runtimeStyle.width と runtimeStyle.height を一時退避し、"auto" で上書することで本来のサイズを取得しています。
"auto" の代わりに "" でもよさそうに見えますが、"" だと期待した結果は得られません。
ページのリフローは発生しません(ガタガタ動きません)。
Opera なら
Opera には、runtimeStyle が無く(currentStyle はある)、image.naturalWidth もないため、非同期で処理します。
Opera なら(パート2)
addEventListener("DOMAttrModified") で同期処理が可能です(id:edvakf さんアドバイス感謝です)
removeAttribute("width", "height"); がポイントです。rhino.width = なにか; のようにwidth, height に代入するやり方だとダメです。
[3] (X)HTML5 Tracking ( 版) <http://html5.org/tools/web-apps-tracker?from=3765&to=3766>
[4] Clarify when 'intrinsic width' takes current pixel density into account.... · 15187e1 · ResponsiveImagesCG/picture-element ( 版) <https://github.com/ResponsiveImagesCG/picture-element/commit/15187e1172549afe7d66a11490631f0f1d977de9>