效果：

代码：

<!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. Oracle EBS-SQL (SYS-6):sys_在线用户职责查询.sql

    /*线用户查询-1*/ SELECT FSAV.USER_NAME,FU.DESCRIPTION,FSAV.RESPONSIBILITY_NAME,FSAV.USER_FORM_NAME,FSAV.L ...

  2. 继承CWnd自绘按钮

    头文件: //头文件 #pragma once // CLhsButton #define MYWM_BTN_CLICK WM_USER+3001 //关闭按钮单击响应 //tab按钮的状态 enum ...

  3. Delphi 函数指针（三大好处：灵活，委托的本质，回调机制），还可把函数指针当参数传入

    首先学习: 指向非对象(一般的)函数/过程的函数指针 Pascal 中的过程类型与C语言中的函数指针相似,为了统一说法,以下称函数指针.函数指针的声明只需要参数列表:如果是函数,再加个返回值.例如声明 ...

  4. brief InformationTechnology theory of evolution

    信息技术进化论简述 无文化流氓帮帮主Ruiy Pk 清华土匪帮帮主YiC 1,按人机交互方式 命令行-->图形界面-->自然交互(语音+手控) Tips:命令行(IBM大型机,小型机+ S ...

  5. poj 2540 Hotter Colder 切割多边形

    /* poj 2540 Hotter Colder 切割多边形 用两点的中垂线切割多边形,根据冷热来判断要哪一半 然后输出面积 */ #include <stdio.h> #include ...

  6. Page_Prerender介绍

    它是asp.net页面的OnPreRender事件的处理程序.此事件是定义在Control类中的,因为Page类(aspx页面的基类)继承的是System.Web.UI.WebControl类,而We ...

  7. dataset 用法（2）

    1.为DataTable添加列 (1)添加列 DataTable  tbl = ds.Tables.Add("User"); DataColumn col =tbl.Columns ...

  8. oracle 导入txt

    没有Oraclehoume的情况下,执行下环境变量文件 sqlldr userid= DM/DM control = /home/oracle/libc/load.ctl load data infi ...

  9. PHP 单列模式实例讲解以及参考网址

    1,http://blog.csdn.net/jungsagacity/article/details/7618587 2,http://www.cnblogs.com/lh460795/archiv ...

  10. C学习之指针强化

    char *p = (char *)malloc(100); malloc是用于分配内存的函数,它的参数为int型,表示分配多少个字节长度,其返回类型为void*,在这里用char*就是强制转化,指定 ...