当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS控制图片超过宽度自动缩小图片等比例缩放源代码分享

JS控制图片超过宽度自动缩小图片等比例缩放源代码分享

2018年12月09日  | 移动技术网IT编程  | 我要评论

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> 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网