标签:
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
标签:
原文地址:http://www.cnblogs.com/softwhy/p/4719758.html