效果：

代码：

<!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. PADS无模命令总结

    1．PADS2007无模命令与快捷键 <x.y>表示坐标.<s>表示文体.<n>表示数字. 1.[C]显示平面的焊盘和热焊盘(Thermal). 2.[D]显示当前 ...

  2. 在 Windows Azure 虚拟机中如何备份和还原 Windows 系统磁盘

    备份和还原对于操作真实的系统来说至关重要.对于 Windows Azure 虚拟机环境中的 Windows Server,可以根据自身的需求选择多种不同的工具或将这些工具结合使用来实现备份.下面将对这 ...

  3. C语言的复合文字

    假设需要向一个带有int型参量的函数传递一个值,这时可以传递一个int型常量,也可以传递一个int型的变量.在C99标准之前,数组参数情况于现在不一样,没有所谓的数组常量可供传递,而在C99中增加了复 ...

  4. vs2013 中HTML页 无法在设计窗口中查看的解决

    VS2013不支持HTML文件的解决办法: 1.将html文件重命名为aspx即可.不需要创建项目,直接拖进vs即可. 2.打开VS菜单->工具->选项->文本编辑器->文件扩 ...

  5. 关于 WP上应用调试时报错“指定的通信资源（端口）”已由另一个应用程序使用 问题

    问题来源 碰到这个问题是调试wp7项目的时候,之前因为安装的是wp8.0的sdk 包括wp7.5所以wp7的也能用,后来不知道怎么回事wp7项目就不能调试了总是显示启动而不是 device或者是虚拟机 ...

  6. Windows上部署Redis

    http://www.cnblogs.com/gaobing/p/5026136.html

  7. Asp.Net 请求处理机制

    前言 我们都知道Web请求响应是基于Http协议,那么我们可以这样来理解,一次Web请求和响应的过程,实际上就是一次发送Http请求和接收Http响应的过程. 客户端向服务器发送一次Http请求,服务 ...

  8. 关于XPath的基本语法

    关于XPath基础语法 关于XPath基础语法 更详细的请看: XPath语法 XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path) 或者步 (steps) ...

  9. 《JavaScript+DOM编程艺术》的摘要（三）---图片库实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  10. 拦截API 注入进程

    本文详细的介绍了在Visual Studio(以下简称VS)下实现API钩子的编程方法,阅读本文需要基础:有操作系统的基本知识(进程管理,内存管理),会在VS下编写和调试Win32应用程序和动态链接库 ...