jQuery/ウインドウサイズに合わせて画像をリサイズしたい

Last-modified: 2011-12-26 (月) 01:24:46

概要
コード
検証時の環境

概要 †

画像幅に上限値を設け、上限値を超えたら幅は上限値に合わせ、高さは比率を維持したまま縮小させるコードを作成します。

↑

コード †

ほんのり抽象的なコード。

-
-
-
!
-
-
|
-
|
!
!
!

// 画像幅調整
function fixImageSize(){
    // maxWidthに幅の上限値を設定します
    var maxWidth = <上限値>;
    // 幅あふれを見つけたら、比率を維持したまま、幅をmaxWidthへ変更します
    $('<セレクタ>').each(function(){
        var w = $(this).width();
        if (w > maxWidth) {
            $(this).height($(this).height()*(maxWidth/w)).width(maxWidth);
        }
    });
}

Void of Knowledgeで使用しているコード。
IE8世代の一般的なブラウザ及び、Android上のブラウザで正しく動くことを確認しました。
これにより、画像を取るときも、貼るときも一切サイズを気にしなくてよくなり、ページが作り易くなりました。

-
-
-
!
-
-
|
-
|
!
!
!

// 画像幅調整
function fixImageSize(){
    // 中央カラム幅の0.9倍を画像幅の限度とする
    var maxWidth = $('#body').width() * 0.9;
    // 幅あふれを見つけたら、比率を維持したまま、幅をmaxWidthへ変更する
    $('a.modal img').each(function(){
        var w = $(this).width();
        if (w > maxWidth) {
            $(this).height($(this).height()*(maxWidth/w)).width(maxWidth);
        }
    });
}

↑

検証時の環境 †

jQuery 1.4.2