网页中控制图片按比例缩放显示
有时候图片超出预想大小,需要将其大小改变,所有图片显示大小一致,可以使用以下方式,新建一个名为test.htm的文件,然后在里面写入以下代码:
<script language="JavaScript"> <!--//图片按比例缩放 var flag=false; function DrawImage(ImgD){ var image=new Image(); var iwidth = 220; //定义允许图片宽度 var iheight = 200; //定义允许图片高度 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="uploads/test.jpg>" onload="javascript:DrawImage(this);" >