JavaScript等比例缩放图片控制超出范围的图片

210 阅读 0 评论 139 点赞

我是靠谱客的博主谦让西装，最近开发中收集的这篇文章主要介绍JavaScript等比例缩放图片控制超出范围的图片，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

js等比例缩放图片，这个功能非常实用，当网页加载一个尺寸比较大的图片时，往往会把一个网页撑的变形，页面变得很难看，于是我们就想到了用JS去控制超出一定范围的图片，脚本之家以稳定页面布局，本代码段就是完成了此功能，而且代码非常简洁，效果很好。

复制代码代码如下:

 
<html><head><title>等比例缩放图片</title><script>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; 
} 
} 
} 
} 
</script></head><body><img 

src=http://www.uoften.com/uploadfile/2013/0803/20130803034531502.jpg" 
alt="自动缩放后的效果" 

width="100" 

height="100" 

onload="javascript：DrawImage(this,80,80)" 

/></body></html> 