Jquery控制图片宽度及高度

HTML代码如下:

<img id = "image" src="/image/picture.jpg"/>

Jquery代码如下:

$(document).ready(function() {
    var maxWidth = 800;
    var maxHeight = 500;
    var curWidth  = $("#image").width();
    var curHeight = $("#image").height();
    if(curWidth > maxWidth){
         $("#image").width(maxWidth);
    }
    if(curHeight > maxHeight){
         $("#image").height(maxHeight);
    }
});

运行效果,如你们所想的那样.

评论

2 楼 hpjianhua 2012-03-28  

嗯,不错,这种是等比例缩放的JS

1 楼 ocaicai 2011-11-29  

选择器可以自己控制，但是楼主的方法没有做到等比例缩放。

$(document).ready(function() {
		    var maxWidth = 780;
		    var maxHeight = 500;
		    var zoomTimes;
		    $("img").each(function(){			
				    var curWidth  = $(this).width();
				    var curHeight = $(this).height();
				    if(curWidth > maxWidth){
				         $(this).width(maxWidth);
				         zoomTimes=curWidth/maxWidth;
				         $(this).height(curHeight/zoomTimes);
				    }else if(curHeight > maxHeight){
				         $(this).height(maxHeight);
				         zoomTimes=curHeight/maxHeight;
				         $(this).width(curWidth/zoomTimes);
				    }
			    });
		});