jQueryでコンテンツの幅に合わせて画像をリサイズ

2009.03.21 10:24 - Category: Web関連 -

昨日勢い余ってこのブログをリニューアルしました。blueprintCSSを使って簡単にグリッドができたりしたのでかなり大雑把な感じでできているのですが、コンテンツの横幅が728pxから526pxに変わったので、今までにアップロードした画像がコンテンツエリアからはみ出てサイドバーの下まで浸食してしまいます。たとえばこのページとか。

CSSでmax-widthを指定してもIEでは意味がないので、jQueryでイメージサイズをいじってみました。

$(function(){
 var mw = 526; //最大幅を指定
 var sl = '#content-main img'; //jQueryセレクタ記述
 $(sl).each(function(){
  var w=$(this).width();
  if (w>mw) {
   $(this).height($(this).height()*(mw/w)).width(mw);
  }
 });
});

IE6で未検証ですが機会があれば検証します。
つーかいいかげん氏ねIE6。

ちなみに、IE8では

$(this).height($(this).height()*(mw/w)).width(mw);

この行のheightとwidthのチェーン順を逆にすると変なことになります。
ブラウザのJSエンジンの変数の取り方がおかしいのか、jQueryが対応しきれていないのかは微妙ですが、どっちにしてもやっぱり氏ねIE。

# Safari 4やChromeで動かない。なんでだろうか。

関連エントリ

コメント
2009.03.21 22:55 kaz

おおお、ちょうど仕事で書いてました。
私の方はこんな感じに書いてますが Mac Safari3/Firefox3、Win IE7/IE6/Chromeでうまく動作してますよ。

$(document).ready(function(){
var max_width = 450;
var selector = ‘.articleBody img’;
$(selector).each(function(){
var width = $(this).width();
var height = $(this).height();
if (width > max_width) {
var ratio = (height / width);
var new_width = max_width;
var new_height = (new_width * ratio);
$(this).height(new_height).width(new_width);
}
});
});

2009.03.22 00:28 まんご！

kazさん
なるほど、関数の引数に関数を入れない方がよいのかもしれません。
jQueryの作法を理解しているわけではないのでそのあたりに引っかかった可能性がありますね。
というわけで本文も改善させていただきますw

2009.03.22 00:32 まんご！

むむう、スクリプトを入れ替えてもどうしてもこのページで動かない…Safari 4のみ。

最初は動いてたのになあ…
heightが0になって画像がきえたり、画像のリサイズをやらなかったり。
他のページやブラウザではちゃんと動くのに。
なんかマークアップで違うところあるかなぁ？

2009.04.02 04:16 kotarok

http://flyingmango.jp/web/browser_version_share_20090224.html

このページでうまく動かないのは、img要素にwidth属性とheight属性が入ってなくて、にもかかわらず$(document).ready()のタイミング、つまり画像がロードされる前にスクリプトが動いてるので画像のサイズが取得できないから。

たまたま動いたりするのは画像をキャッシュから読んでて、$(document).ready()のタイミングでもたまたま画像があったりする時があるからかな。

なのでwidth属性とheight属性を加えるか、$(document).load()のタイミングで動かすと動くと思う。それか$(”#content-main img”).load()で動かすか。などなど。

2009.04.04 07:57 まんご！

おおー！さすがkotarok。
なるほど。もとをただせば正しくマークアップしろということですね。
しかし今から全部画像チェックするのか。。。面倒だな。

2009.05.18 17:39 $(document).readyか$(window).loadか・・・それが問題だ « チャゲってる日々

[...] http://flyingmango.jp/web/resize_img_with_jquery.html　（コメント欄参照） [...]

最近のWeb関連
flyingmango.jp 最新