JS图片等比例缩放方法完整示例
本文实例讲述了JS图片等比例缩放方法。分享给大家供大家参考,具体如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>javascript自动按比例显示图片,按比例压缩图片显示</title>
<scripttype="text/javascript">
functionAutoResizeImage(maxWidth,maxHeight,objImg){
varimg=newImage();
img.src=objImg.src;
varhRatio;
varwRatio;
varRatio=1;
varw=img.width;
varh=img.height;
wRatio=maxWidth/w;
hRatio=maxHeight/h;
if(maxWidth==0&&maxHeight==0){
Ratio=1;
}elseif(maxWidth==0){//
if(hRatio<1)Ratio=hRatio;
}elseif(maxHeight==0){
if(wRatio<1)Ratio=wRatio;
}elseif(wRatio<1||hRatio<1){
Ratio=(wRatio<=hRatio?wRatio:hRatio);
}
if(Ratio<1){
w=w*Ratio;
h=h*Ratio;
}
objImg.height=h;
objImg.width=w;
}
</script>
</head>
<body>
<br/>
<imgsrc="1.jpg"
border="0"
width="0"
height="0"
onload="AutoResizeImage(100,0,this)"
/>
width:100px
<br/>
<br/>
<imgsrc="1.jpg"
border="0"
width="0"
height="0"
onload="AutoResizeImage(0,100,this)"
/>
height:100px
<br/>
<br/>
<imgsrc="1.jpg"
border="0"
width="0"
height="0"
onload="AutoResizeImage(100,100,this)"
/>
width:100pxheight:100px
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。