2012年01月14日に投稿

[jQuery] 画像の表示サイズに上限や下限を設定する

img 要素に width や height を指定すると画像の表示サイズを変更することができます。ですが width や height に上限や下限を設定したい場合は XHTML や CSS だけでは実現できません。この機能をjQuery を使って実現します。

例えば下記のコードは target_image というクラスが付けられた画像の横幅が 100px 以上になった場合に強制的に 100px に縮めます。つまり表示される画像サイズに上限を設けることができます。

$(function(){
    var w = $('.target_image').css('width').replace(/px/, '');
    if(w > 100){
        $('.target_image').css('width', 100);
    }
});

$(function(){

var w = $('.target_image').css('width').replace(/px/, '');

if(w > 100){

$('.target_image').css('width', 100);

}

});

逆に下限を設ける場合は w > 100 と比較しているところを w < 100 とすればOKです。

関連記事