JS 图片按比例缩小

我们经常会遇到在页面中的图片按照我们自己的大小来显示，这样可以让页面看起来更规范一些。

　　比如我们要在页面种显示130×160的图片，相当于我们将图片放入这样的一个相框那，超过的就缩放到这个框的大小，小的就原样显示。

　　我们这里有2种解决办法:

　　1、不按照比例的缩放

<script language="javascript"> 
function changeImg(mypic){ 
var xw=130; 
var xl=160; 

var width = mypic.width; 
var height = mypic.height; 

if (width > xw ) mypic.width = xw; 
if (height > xl ) mypic.height = xl; 
} 
</script> 
<img src="sh180.jpg" οnlοad="changeImg(this)"> 


　　2、按照比例的缩放

<script language="javascript"> 
function changeImg1(mypic){ 
var xw=160; 
var xl=180; 

var width = mypic.width; 
var height = mypic.height; 
var bili = width/height; 

var A=xw/width; 
var B=xl/height; 

if(A>1||B>1) 
{ 
if(A<B)
{ 
mypic.width=xw; 
mypic.height=xw/bili; 
} 
if(A>B)
{ 
mypic.width=xl*bili; 
mypic.height=xl; 
} 
} 
} 
</script> 
<img src="sh180.jpg" οnlοad="changeImg(this)">


　　改变和控制显示的图片大小（保持比例，同时可限制高宽）

javascript: 改变和控制显示的图片大小（保持比例，同时可限制高宽），
<IMG src="images/forumnew.gif" style="border:1px #ff0000 solid" name=ntimg onResize="javascript: for(i=0;i<123 && (this.width>100||this.height>100);i++){ this.width-= this.width/10 } " _onLoad="alert('换图片了,不过是动画GIF，你就惨了，关不掉了')"> 
onResize显示改变后的图片大小，原来是34
<a href=# onClick="document.all.ntimg.width +=100 ">xxxx加大xxxx</a> 
<a href=# onClick="document.all.ntimg.src = 'images/input.gif' ">yyyyyy换图yyyyyy</a>
<a href=# onClick="alert( document.all.ntimg.width + ' & ' + document.all.ntimg.height ) ">yyyyyyy图大小yyyyyy</a>