縦長画像を縮小! jQueryで縦長な画像だけを縮小して見やすくする方法

ここのところ進めている当ブログのリニューアル。いよいよスマートフォンの方にも手を入れちゃいました。

そんな作業のおり、サイト上に表示される縦長(ポートレイト)画像を見ていて見づらいと感じたので、これをどうにかできんかなーと試行錯誤してみました。

どういうことかといいますと、大方のスマートフォンサイトって、端末を縦にしても横にしても画面幅にぴったりと添うようにされています。
それはうちも例外なく対応しているのですが、このときの画像の大きさをどうするかが結構な悩みどころなのです。

スマートフォンサイトで画像を表示させる場合、だいたい<img>要素(もしくはそれに付与する属性)に対して、

max-width: 100%;

を指定しています。
要するに画面幅いっぱいに画像の最大幅まで合わせるよう指定しているわけですが、これは横長な画像だろうが縦長な画像だろうが、それはもう平等に画像幅の限りまで画面幅いっぱいにしてくれます。

横長な画像は別にいいんですが、これが縦長な画像になるともう大変。
縦長なぶん画面幅いっぱいになると、iPhone 4sだとほぼ画面を占有されるような状態に･･･。これは大変見づらい。

じゃあ、これを解決するにはどうしたらいいのか?
パッと思いつくのは、CSSで画像全てに対して、あるいは縦長な画像だけを別の要素で囲って縮小するよう指定してしまう方法。

ハンサムクロジくん(kuroji1987)が、そうした形で対応したことを書いていましたが、いかんせんこの方法だと、過去記事は目視で処理していくという地道な作業に頼らざるを得ません。すげーめんどい。

正直、そんなめんどくさいこと僕はやりたくありません。
でも、それをどうにかしちゃおうっていうことでjQueryで対応してみました。

縦長な画像のみstyle属性を付与して縮小する

$("img").bind("load",function(){
	var h = $(this).height();
	var w = $(this).width();
	if(h > w) {
		$(this).css("max-width","70%");
	}
});

処理としては、画像がロードされた段階で画像の幅と高さを取得させ、次に画像の高さと幅を比較して、高さが大きい場合のみ<img>要素に対してstyle属性を付与させるという流れ。

max-widthで指定したとき、heightにautoを指定しますが、この状態だと画像がロードされる前に上の処理が動いてしまうことで、高さを0で返してきてしまいます。

それを回避するために、

.bind("load",function(){});

を使ってロードまで処理しないようにしている感じです。

一応、このコードを実装して、iOS端末とAndroid端末で確認をしてみたところ、特に問題なく縦長の画像のみが縮小されるようになりました。

この方法なら、わざわざ過去記事をちまちま書き換える必要もありません。
同じように縦長画像どうしようかなーと悩んでいる人はお試しください。