在Web上显示图片,通常都会有图片显示比例问题,如果不给<img />限制width和height,那么如果图片大了就会将整个页面挤乱,图片小了又会使图片失真。
1、预先定义好图片显示的标准宽度和高度。
2、如果图片的大小超过了标准定义,那么等比例压缩图片。
3、如果图片的大小等于标准定义,那么按照标准宽度和高度显示图片。
4、如果图片的大小小于标准定义,那么不对图片进行任何压缩处理。
<script language="JavaScript"> //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽度,允许的高度) var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ flag=true; if(image.width/image.height>= iwidth/iheight){ if(image.width>iwidth){ ImgD.width=iwidth; ImgD.height=(image.height*iwidth)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt=image.width+"×"+image.height; } else{ if(image.height>iheight){ ImgD.height=iheight; ImgD.width=(image.width*iheight)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt=image.width+"×"+image.height; } } } </script> 调用: <img src="images/toplogo.gif" onload="javascript:DrawImage(this,100,100)">