jquery を使用して画像の幅と高さを等しい比率で制御する具体的な実装-jsチュートリアル-php.cn

jquery を使用して画像の幅と高さを等しい比率で制御する具体的な実装

WBOY

リリース： 2016-05-16 17:01:46

オリジナル

1032 人が閲覧しました

コアコード:

$(function() { 
$(".dvcontent img").each(function() { 
var maxwidth = 520; 
if ($(this).width() > maxwidth) { 
var oldwidth = $(this).width(); 
var oldheight = $(this).height(); 
var newheight = maxwidth/oldwidth*oldheight; 
$(this).css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"}); 
$(this).attr("title","点击查看原图"); 
$(this).click(function(){window.open($(this).attr("src"))}); 
} 
}); 
});

ログイン後にコピー

上記のコードを実行できない場合は、次のコードを使用できます:

$(window).load(function() {
	$(".dvcontent img").each(function() { 
	var maxwidth = 600; 
	if ($(this).width() > maxwidth) { 
	var oldwidth = $(this).width(); 
	var oldheight = $(this).height(); 
	var newheight = maxwidth/oldwidth*oldheight; 
	$(this).css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"}); 
	$(this).attr("title","点击查看原图"); 
	$(this).click(function(){window.open($(this).attr("src"))}); 
	} 
	}); 
});

ログイン後にコピー

IE6と互換性があり、画像が指定幅を超えた場合に自動的に縮小するCSSによる方法もありますが、この書き方はW3Cの標準に準拠していません。コードは次のとおりです:

.cate img{
    max-width: 600px; 
    height:auto; 
    width:expression(this.width > 600 &#63; "600px" : this.width);
 }

ログイン後にコピー

IE やその他のブラウザと可能な限り互換性を持ち、W3C 標準に準拠するために、js を使用して画像の幅を制御します。以下では、jquery を使用して画像の最大幅を制御します。メインコードは以下の通りです:

$(window).load(function() {
    $(".cate img").each(function() {
        var maxwidth = 600;
        if ($(this).width() > maxwidth) {
            $(this).width(maxwidth);
        }
    });
});

ログイン後にコピー

コードは非常にシンプルで、cate スタイルなので、img の最大幅は 600 ピクセルのみです。 .each(function(){......})。各関数は、指定された画像コレクションオブジェクトに対して次のメソッドを 1 つずつ呼び出します。この jquery メソッドは、IE6 以降のブラウザ、chrome、Firefox での画像表示の最大幅を制御できます。