2013年01月09日

「jQuery Masonry」で画像を表示した際の表示崩れを解決する方法

   
高さの異なるボックスをタイル状に並べてくれる「jQuery Masonry」ですが、ボックス内にテキストと画像を表示させると、Google Chrome や Safari では画像の高さがボックスに反映されず、上下のボックスが潰れて重なったような表示になってしまいました。

この解決方法は、HTMLにimgタグを記述する際に、widthとheightを書いてあげると、正常に高さを取得できるようになります。これは Chrome と Safari の仕様のようで、画像の縦横をうまく取得できないそうなので、HTMLに記述して教えてあげる訳です。意外な盲点でしたが、最近確かにHTMLに縦横サイズ指定の記述はしなくなっておりました。

誤)
<img src="画像ファイルパス" alt="説明" />

正)
<img src="画像ファイルパス" alt="説明" width="横幅" height="高さ" />

これで画像を使用してもキレイに表示されるようになります。
posted by Liang Zhaohong at 15:48 | Comment(1) | TrackBack(0) | JS、jQuery、prototype | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
まったく同じ事象が起きたので、
この記事非常に助かります。

まだこれから修正するところですが、恐らく解決されると思います。
ありがとうございました!
Posted by sshojiro at 2014年05月13日 16:46
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。