欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-20 12:51:24
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>