JS控制图片超过宽度自动缩小图片等比例缩放源代码分享
js控制图片超过宽度自动缩小图片等比例缩放源代码分享
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>最新javascript自动按比例显示图片，按比例压缩图片显示</title>
<script type="text/javascript">
function autoresizeimage(maxwidth,maxheight,objimg){
var img = new image();
img.src = objimg.src;
var hratio;
var wratio;
var ratio = 1;
var w = img.width;
var h = img.height;
wratio = maxwidth / w;
hratio = maxheight / h;
if (maxwidth ==0 && maxheight==0){
ratio = 1;
}else if (maxwidth==0){//
if (hratio<1) ratio = hratio;
}else if (maxheight==0){
if (wratio<1) ratio = wratio;
}else if (wratio<1 || hratio<1){
ratio = (wratio<=hratio?wratio:hratio);
}
if (ratio<1){
ww = w * ratio;
hh = h * ratio;
}
objimg.height = h;
objimg.width = w;
}
</script>
</head>
<body>
<br />
原图显示（534 x 800）<br />
onload="autoresizeimage(0,0,this)<br />
<a href=https://www.2cto.com/uploadfile/2018/0326/20180326111739422.jpg" target="_blank"><img src=https://www.2cto.com/uploadfile/2018/0326/20180326111739422.jpg" border="0" width="0" height="0" onload="autoresizeimage(0,0,this)" alt="534 x 800"/></a><br/><br />
1.按宽度250压缩,不限制高度 按比例压缩<br />
onload="autoresizeimage(250,0,this)"<br />
<a href="https://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.x" target="_blank"><img src=https://www.2cto.com/uploadfile/2018/0326/20180326111739422.jpg" border="0" width="0" height="0" onload="autoresizeimage(250,0,this)" alt="250 x 374"/></a><br /><br />
2.按高度250压缩,不限制宽度 按比例压缩<br />
onload="autoresizeimage(0,250,this)"<br />
<a href="https://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src=https://www.2cto.com/uploadfile/2018/0326/20180326111739422.jpg" border="0" width="0" height="0" onload="autoresizeimage(0,250,this)" alt="166 x 250"/></a><br /><br />
3.按高度250宽度250 按比例压缩<br />
onload="autoresizeimage(250,250,this)"<br />
<a href="https://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src=https://www.2cto.com/uploadfile/2018/0326/20180326111739422.jpg" border="0" width="0" height="0" onload="autoresizeimage(250,250,this)" alt="200 x 300"/></a><br /><br />
4.高宽不等比例压缩 （400 x 512）,此时高度不变，会自动按高度的比例压缩。<br />
onload="autoresizeimage(400,512,this)"<br />
<a href="https://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src=https://www.2cto.com/uploadfile/2018/0326/20180326111739422.jpg" border="0" width="0" height="0" onload="autoresizeimage(400,512,this)" alt="341 x 512"/></a><br /><br />
5.高宽不等比例压缩 （300 x 600）,此时宽度不变，会自动按宽度的比例压缩。<br />
onload="autoresizeimage(300,600,this)"<br />
<a href="https://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src=https://www.2cto.com/uploadfile/2018/0326/20180326111739422.jpg" border="0" width="0" height="0" onload="autoresizeimage(300,600,this)" alt="300 x 449"/></a><br /><br />
6.如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示）<br />
原图444 x 207,压缩为 500 x 600,将保持原图显示<br />
onload="autoresizeimage(500,600,this)"<br />
<a href="https://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src=https://www.2cto.com/uploadfile/2018/0326/20180326111739132.jpg" border="0" width="0" height="0" onload="autoresizeimage(500,600,this)" alt="444 x 207"/></a><br /><br />
</body>
</html>
上一篇： easyui表格列排序（升序/降序）
下一篇： vue中引入layer.js出错