在限定范围内实现图片自动缩放

一）方法1

<style type="text/css">
.Image-max-width {   

    max-width:200px;height:auto;cursor:pointer;   

    border:1px dashed #4E6973;padding: 3px;   

    zoom:expression( function(elm) {   

        if (elm.width>2000) {   

            var oldVW = elm.width; elm.width=200;   

            elm.height = elm.height*(200 /oldVW);  

        }  

        elm.style.zoom = '1';  

    }(this)); 

}
.Image-max-height{   

    max-height:200px;width:auto;cursor:pointer;   

    border:1px dashed #4E6973;padding: 3px;   

    zoom:expression( function(elm) {   

        if (elm.height>2000) {   

            var oldVH = elm.height; elm.height=200;   

            elm.width = elm.width*(200 /oldVH);  

        }  

        elm.style.zoom = '1';  

    }(this)); 

}
</style>


<script type="text/javascript">
	function Wa_SetImgAutoSize(img) {
	    //var img=document.all.img1;//获取图片
	    var MaxWidth = 200; //设置图片宽度界限
	    var MaxHeight = 200; //设置图片高度界限
	    var HeightRatio = img.offsetHeight / MaxHeight; //设置高宽比
	    var WidthRatio = img.offsetWidth / MaxWidth; //设置宽高比

	    if (HeightRatio > WidthRatio) {
		    alert("t");
	        $(img).addClass("Image-max-height");
	    } 
	    if (HeightRatio < WidthRatio) {
	    	 alert("tt");
	        $(img).addClass("Image-max-width");
	    } 
	}
</script>

[/code]
调用方法：

<div align=center style="width:200px;height:200px;" ><img  src ="图片地址" onload='Wa_SetImgAutoSize(this);'/></div>

参考：[url]http://www.cnblogs.com/MaxIE/archive/2008/03/27/1123881.html[/url]
二）方法2

<script type="text/javascript">
	function Wa_SetImgAutoSize(img) {
	    //var img=document.all.img1;//获取图片
	    var MaxWidth = 200; //设置图片宽度界限
	    var MaxHeight = 200; //设置图片高度界限
	    var HeightWidth = img.offsetHeight / img.offsetWidth; //设置高宽比
	    var WidthHeight = img.offsetWidth / img.offsetHeight; //设置宽高比
	    if (img.offsetWidth > MaxWidth) {
	        $(img).css("width", MaxWidth);
	        $(img).css("height", MaxWidth * HeightWidth);
	    } 
	    if (img.offsetHeight > MaxHeight) {
	        $(img).css("height", MaxHeight);
	        $(img).css("width", MaxHeight * WidthHeight);
	    } 
	}
</script>

调用方法：

<div align=center style="width:200px;height:200px;" ><img  src ="图片地址" onload='Wa_SetImgAutoSize(this);'/></div>

参考：[url]http://www.codefans.net/jscss/code/513.shtml[/url]