当前位置: 代码迷 >> Web前端 >> 怎么实现限制网页图片尺寸?(实用篇)
  详细解决方案

怎么实现限制网页图片尺寸?(实用篇)

热度:101   发布时间:2012-10-28 09:54:44.0
如何实现限制网页图片尺寸?(实用篇)

<script language=JavaScript> var flag=false; function DrawImage(ImgD){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ flag=true; if(image.width/image.height>= 140/180){ if(image.width>140){ ImgD.width=140; ImgD.height=(image.height*140)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } /*ImgD.alt=image.width+"×"+image.height;*/ } else{ if(image.height>180){ ImgD.height=180; ImgD.width=(image.width*180)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } /*ImgD.alt=image.width+"×"+image.height;*/ } } /*else{ ImgD.src=""; ImgD.alt="" }*/ } </script> 把以上这段代码加在<head></head>之间然后在图片显示的时候,用这种方式: <img src='xxx.gif' border=0 onload='javascript:DrawImage(this);'> (其中xxx.gif是你要显示的图片) 以上代码我过N次了。。你也可以修改其中的几个数字来达到图片按照你的要求显示(比如你觉得上面这段代码中的图片宽高缩小后还是大了点,你可以再调小一点。其中140与180,分别代表宽和高,你修改的时候一定要注意如果修改140为120,则180一定要修改为160,也就是说要修改就两个值都减去同一个值。总之这两个值相减要等于40.. 具体参考网址:http://www.sastav.cn http://www.ljyzjx.com http://www.ib2c.cn 以上网站我都采用了这种方法,很有效的让图片按照比例缩小而不会变形。像是做到了图片略缩图的效果一样,很不错哦。。。


  相关解决方案