javascript自动按比例显示图片，按比例压缩图片显示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片缩放</title> </head> <body> <img src="http://cz.xcabc.com/Img/20150130132027.jpg" class="zoom_img" data-width="225" alt="等等我是图片" /> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> //图片缩放 $(function(){ function AutoResizeImage(maxWidth,maxHeight,objImg){ var img = new Image(); console.log('2'); img.onload=function(){ var hRatio; var wRatio; var Ratio = 1; var w = img.width; var h = img.height; console.log(w); 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){ w = w * Ratio; h = h * Ratio; } objImg.style.height = h+'px'; objImg.style.width = w+'px'; } img.src = objImg.src; }; var imgs=$('.zoom_img'); //console.log(imgs); for (var i=0;i<imgs.length;i++) { var item=imgs.eq(i); var width=parseInt(item.attr('data-width')); AutoResizeImage(width,0,item[0]); } }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html> <html lang="en"> <head> <meta 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){ w = w * Ratio; h = h * Ratio; } objImg.height = h; objImg.width = w; } </script> </head> <body> <br /> 原图显示（534 X 800）<br /> onload="AutoResizeImage(0,0,this)<br /> <a href="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.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="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.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="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.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="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.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="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.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="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.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="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/242776/o_20070410_b7409cd284a0f799a357uePcEFa6ty0X.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)" alt="444 X 207"/></a><br /><br /> </body> </html>

提示：你可以先修改部分代码再运行。

再来一个

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>图片按比例自适应缩放</title> <style> .cnt{text-align:center;width:600px;height:350px;margin:0 auto;border:1px solid #ddd;} </style> </head> <body> <div class="cnt"> <img id="img" src="http://www.wallcoo.com/1920x1440/1920x1440_nature_wallpapers_02/wallpapers/1920x1440/%5Bwallcoo.com%5D_1920X1440_nature_wallpapers_aVistas005.jpg" alt="alipay" /> </div> <script> window.onload = function() { var img = document.getElementById('img'), /** * 图片按比例自适应缩放 * @param img {Element} 用户上传的图片 * @param maxWidth {Number} 预览区域的最大宽度 * @param maxHeight {Number} 预览区域的最大高度 */ resizeImg = function(img, maxWidth, maxHeight){ var w = img.width, h = img.height; // 当图片比预览区域小时不做任何改变 if(w < maxWidth && h < maxHeight) return; // 当实际图片比例大于预览区域宽高比例时 // 缩放图片宽度，反之缩放图片宽度 w/h > maxWidth/maxHeight ? img.width = maxWidth : img.height = maxHeight; }; resizeImg(img, 500, 300); } </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » javascript自动按比例显示图片，按比例压缩图片显示