你的位置:首页 > Java教程

[Java教程]javascript图片等比例缩放代码


javascript图片等比例缩放代码:

图片的尺寸在初始的状态下往往不能够完美的适应网页的布局,这个时候就需要对图片进行缩放处理,当然不能够是无规则的进行缩放,否则可能出现图片变形现象,下面是一段能够对图片进行等比例缩放的实例代码。

代码如下:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /><title>图片等比例缩放代码-蚂蚁部落</title><script type="text/javascript">//参数(图片,允许的宽度,允许的高度) function DrawImage(ImgD,iwidth,iheight){  var image=new Image();  image.src=ImgD.src;  if(image.width>0&& image.height>0){   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;    }   }  else{    if(image.height>iheight){     ImgD.height=iheight;     ImgD.width=(image.width*iheight)/image.height;    }   else{     ImgD.width=image.width;     ImgD.height=image.height;    }   }  } } window.onload=function(){ var theimage=document.getElementById("theimage"); DrawImage(theimage,80,80)}</script></head><body><img src="theimg.jpg" alt="自动缩放后的效果" id="theimage"/></body></html>

以上代码实现了图片等比例缩放效果,直接套用就可以了。

原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0520/1994.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8543