当前位置：Gxlcms > JavaScript > JavaScript等比例缩放图片控制超出范围的图片

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

时间：2021-07-01 10:21:17 帮助过：23人阅读

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=//www.gxlcms.com/uploadfile/2013/0803/20130803034531502.jpg" 
alt="自动缩放后的效果" 

width="100" 

height="100" 

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

/></body></html>

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

人气教程排行