Death And The Maiden

"CHRISTMAS TIME" by Sholim

…………………………………………………

jQueryで画像の高さを取得しようとしたら失敗してしまった

複数の画像の高さを取得して、レイアウトを調整しようとしたのだがうまくいかない。 その時のHTMLは以下↓のようになっていた。

<div id="photo_list"> <img src="photo1.jpg" width="100" /> <img src="photo2.jpg" width="100" /> <img src="photo3.jpg" width="100" /> </div>

javascript（jQuery）はこう↓

$(function(){ var photos = $('#photo_list img'); var max_height = 0; $.each(photos,function(){ if( max_height < $(this).height() ){ max_height = $(this).height(); } }); $('#photo_list').height(max_height); });

画像をfloatで横並びにしたので、その親要素の高さを画像の中で一番大きいサイズに合わせたかった。 が、高さの取得結果がまさかの「0」。

ちなみに、読み込まれる画像は動的に変化するため高さを予め指定することはできない。 横幅（width）のみを指定してるので、ブラウザの自動リサイズによって高さが決まる。

試しに、$(this).width();で横幅を取得してみると、こちらは「100」と正常に返ってくる。

これは、横幅は明示的に指定していて、高さは指定していないから。 ・・・ということなのだろう。 ん〜じゃあどうしたらいいの？っとググッてみると、対処法がわかった。