用jquery等比例控制圖片寬高的具體實現_jquery

核心程式碼：

$(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"))}); 
	} 
	}); 
});

透過css還有一種方法相容IE6能讓圖片在超過規定的寬度時自動按比例縮小，但該寫法不符合W3C標準。程式碼如下：

.cate img{
    max-width: 600px; 
    height:auto; 
    width:expression(this.width > 600 ? "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的最大寬度只能為600px。 .each(function(){......})，each在這裡是對指定的圖片集合物件逐一呼叫下面的方法。這種jquery方法在IE6以上瀏覽器和chrome及Firefox上都能實現控制圖片顯示時的最大寬度。