效果：

代码：

<!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 />

    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>

【JS控制图片显示的大小（图片等比例缩放）】的更多相关文章

  1. JS控制图片显示的大小（图片等比例缩放）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CSS- 控制图片显示指定大小 并超过大小自动缩小

    有时候利用css比较方便控制网页html中img图片的显示大小.这样也省得自己一个一个去定义. img,a img{ border:; margin:; padding:; max-width:600 ...

  3. js控制页面显示和表单提交

    早期的web页面在显示方面一般在后台进行控制,虽然对后台开发来讲是比较容易做到的,但是涉及到一个问题,那就是数据库压力. 因为要控制显示,所以会比较频繁的从数据库中来回调用. 现在的js功能越来越强, ...

  4. js控制页面显示

    两个菜单切换显示页面内容: js控制代码, /** JS初始化 **/ $(document).ready(function() { $('#email_btn').click(function(){ ...

  5. js控制文本显示的字数，超出显示省略号

    在css中我们说了用css控制文本显示几行,超出用省略号,但这个办法是要完全占满一整行的,偏偏就是有UI设计师就不这么干,是不是很想打他,哈哈哈,我不会的时候都这样子在心里骂设计师的,这么久那么爱搞特 ...

  6. setImageEdgeInsets 和 setImage配合使用达到button区域大并可调节其上图片显示区域大小的效果

    [self.indicator setImage:[UIImage imageNamed:@"01_login_moreicon@2x.png"] forState:UIContr ...

  7. python-----opencv读取视频、读取图片 显示指定大小并按键实现暂停、播放

    按空格键实现暂停播放,代码如下: cv2.namedWindow("m1", 0) cv2.resizeWindow("m1", 800, 600) cv2.i ...

  8. discuz x3.3排行首页图片显示更多的图片

    找到\source\include\misc\misc_ranklist_index.php文件,修改41行 $ranklist = getranklist_pictures_index(9); 为 ...

  9. js 控制div 显示隐藏的问题

    var divs = document.getElementsByTagName("div");得到所有的divfor(var i=0;i<divs.length;i++){ ...

随机推荐

  1. 利用新版ShareSDK进行手动分享（自定义分享界面）

    之前有用过Share SDK进行快捷分享,可是官方demo中的快捷分享的界面已经设置死了,而公司的产品又设计了自己的分享界面,这就需要我进行手动分享了.当前ShareSDK版本是2.5.4. 看了一堆 ...

  2. 深入解析SSD中MLC与SLC的性能差异

    固态硬盘(Solid State Disk或Solid State Drive),也称作电子硬盘或者固态电子盘,是由控制单元和固态存储单元(DRAM或FLASH芯片)组成的硬盘. 固态硬盘的接口规范和 ...

  3. Xamarin.Android 如何使用Assets目录下的文件

    原文:Xamarin.Android 如何使用Assets目录下的文件 个人原创,转载注明出处:http://blog.csdn.net/supluo/article/details/43672411 ...

  4. js中的刷新方法

    刷新并清除缓存: location.reload(true); 返回上一页并刷新: history.go(-1); location.reload(true); 子页面刷新父页面: self.open ...

  5. 多个target下编译的时候出错问题的解决

    在工程里如果有多个target的时候,如图 那么编译的时候一定要注意Xcode右侧勾选了正确的target,否则有可能会导致一系列让你想不到的bug. ,另外,如果工程中有framework,那么一定 ...

  6. dijkstra 优先队列最短路模板

    ;;*maxn];,):id(a),dist(b){}        ));        ;i<=n;i++)dist[i]=inf;        dist[st]=;        ;i= ...

  7. Error pulling origin: error: The following untracked working tree files would be overwritten by...

    git在pull时,出现这样的错误的时候,可能非常多人进进行stash.相关stash的请看:Error pulling origin: error: Your local changes to th ...

  8. JQuery让input从disabled变成enabled

    JQuery让input从disabled变成enabled document.getElementByIdx_x("removeButton").disabled = false ...

  9. iOS 根据图片URL从本地相册获取图片

    最近做一个聊天的项目,需要发送图片后读取本地图片显示到列表里.刚开始的时候,天真的认为可以用SDWebImage直接加载,然后并不能行. 于是在网上搜了搜,如何根据从相册获取的UIImagePicke ...

  10. ##DAY10 UITableView基础

    ##DAY10 UITableView基础 UITableView继承于UIScrollView,可以滚动. UITableView的每⼀条数据对应的单元格叫做Cell,是UITableViewCel ...