<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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){ w = w * Ratio; h = h * Ratio; } objImg.height = h; objImg.width = w; } </script> </head> <body> <br /> 原图显示（534 X 800）<br />https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" alt="534 X 800"/></a><br/><br /> 1.按宽度250压缩,不限制高度 按比例压缩<br /><br /> <a href="https://www.jb51.net/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" alt="250 X 374"/></a><br /><br /> 2.按高度250压缩,不限制宽度 按比例压缩<br /><br /> <a href="https://www.jb51.net/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" alt="166 X 250"/></a><br /><br /> 3.按高度250宽度250 按比例压缩<br /><br /> <a href="https://www.jb51.net/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" alt="200 X 300"/></a><br /><br /> 4.高宽不等比例压缩 （400 X 512）,此时高度不变，会自动按高度的比例压缩。<br /><br /> <a href="https://www.jb51.net/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" alt="341 X 512"/></a><br /><br /> 5.高宽不等比例压缩 （300 X 600）,此时宽度不变，会自动按宽度的比例压缩。<br /><br /> <a href="https://www.jb51.net/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" alt="300 X 449"/></a><br /><br /> 6.如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示）<br /> 原图444 x 207,压缩为 500 x 600,将保持原图显示<br /><br /> <a href="https://www.jb51.net/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218122006996.jpg" alt="444 X 207"/></a><br /><br /> </body> </html>
运行效果图如下：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript图形绘制技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》