jQueryで異なる大きさの画像をリサイズ&中央表示する ryodesignblog

jQueryで異なる大きさの画像をリサイズ&中央表示する

jQueryで、大きさの異なる画像をいい感じにリサイズして、上下左右中央表示にする方法をメモしておきます。 やりたいこと なんかよく分からん説明で申し訳ないですが...。 つまりどういうことをやりたいかというと、WordPressのトップページや記事一覧ページなどで画像のサムネイルを表示するときに、画像をいい感じにリサイズして配置したい、ということです。 つまり...どういうことだってばよ...？ 画像のリストがある状況 画像でリストを作る感じです。複数のliタグの中にそれぞれ大きさの異なる画像があるという状況。liの幅と高さは400x200pxとします。 そのままリサイズすると...？ imgの横幅を400pxにリサイズするとします。例えば800x600pxの画像は400x300pxにリサイズされて、ちゃんと表示されます。 でも、800x300pxの画像だと、400x150pxにリサイズされて、50pxの余白ができちゃうわけですね。 これを解決したいなぁと。 画像が横長の場合 先ほどの800x300pxのような横長の画像がある場合は、まず画像の高さを200pxにリサイズします。じゃあ横幅が400pxよりも余りますよね。普通に表示すると左端から表示されて、右端が切れてしまいます。そこで、画像を左右中央に配置します。 画像が縦長の場合 縦長の画像の場合もうまいこと表示させたい。 例えば、800x1000pxの画像がある場合は、先ほどとは反対に、まず画像の幅を400pxにリサイズします。すると高さが500pxになり、余ります。この画像を400x200pxの領域の上下中央に表示します。 コードはこうなります $(function(){ $("ul li img").bind("load", function(){ $("ul li").each(function(){ var _liWidth = $(this).width(), _liHeight = $(this).height(), _imgWidth = $("img", this).width(), _imgHeight = $("img", this).height(), _imgMarginLeft = _imgWidth/2, _imgMarginTop = _imgHeight/2; if( (_imgWidth/_imgHeight) > 1 ){

http://blog.ryodesign.net/2012/12/18/jquery-images-resize-and-center/

jQueryで異なる大きさの画像をリサイズ&中央表示する ryodesignblog

jQueryで異なる大きさの画像をリサイズ&中央表示する ryodesignblog

http://tmblr.co/ZdKHsxZhJACc