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

效果：

代码：

<!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控制图片显示的大小（图片等比例缩放）】的更多相关文章

JS控制图片显示的大小（图片等比例缩放）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
CSS- 控制图片显示指定大小并超过大小自动缩小
有时候利用css比较方便控制网页html中img图片的显示大小.这样也省得自己一个一个去定义. img,a img{ border:; margin:; padding:; max-width:600 ...
js控制页面显示和表单提交
早期的web页面在显示方面一般在后台进行控制,虽然对后台开发来讲是比较容易做到的,但是涉及到一个问题,那就是数据库压力. 因为要控制显示,所以会比较频繁的从数据库中来回调用. 现在的js功能越来越强, ...
js控制页面显示
两个菜单切换显示页面内容: js控制代码, /** JS初始化 **/ $(document).ready(function() { $('#email_btn').click(function(){ ...
js控制文本显示的字数，超出显示省略号
在css中我们说了用css控制文本显示几行,超出用省略号,但这个办法是要完全占满一整行的,偏偏就是有UI设计师就不这么干,是不是很想打他,哈哈哈,我不会的时候都这样子在心里骂设计师的,这么久那么爱搞特 ...
setImageEdgeInsets 和 setImage配合使用达到button区域大并可调节其上图片显示区域大小的效果
[self.indicator setImage:[UIImage imageNamed:@"01_login_moreicon@2x.png"] forState:UIContr ...
python-----opencv读取视频、读取图片显示指定大小并按键实现暂停、播放
按空格键实现暂停播放,代码如下: cv2.namedWindow("m1", 0) cv2.resizeWindow("m1", 800, 600) cv2.i ...
discuz x3.3排行首页图片显示更多的图片
找到\source\include\misc\misc_ranklist_index.php文件,修改41行 $ranklist = getranklist_pictures_index(9); 为 ...
js 控制div 显示隐藏的问题
var divs = document.getElementsByTagName("div");得到所有的divfor(var i=0;i<divs.length;i++){ ...

随机推荐

C++_enum
C++的enum可以限制成员的类型 //error C2440: “=”: 无法从“int”转换为“color” #include <iostream> using namespace s ...
使用iscroll插件实现下拉刷新功能
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
Android 4.2启动代码分析(一)
Android系统启动过程分析 Android系统的框架架构图如下(来自网上): Linux内核启动之后----->就到Android的Init进程 ----->进而启动Android ...
翻转View
翻转View by 伍雪颖 CGContextRef context = UIGraphicsGetCurrentContext(); [UIView beginAnimations:nil cont ...
Linux 内核优化
声明:本文档来自互联网整理部份加自已实验部份所得: TCP 相关部份经常使用名词说明: retries(再试). TCP server <---> client通信状态 ...
C++ DLL注册
今天项目中需要用C++实现对几个DLL文件的注册,查了许多资料,总结如下: #include <SHLWAPI.H> #pragma region DLL 注册与反注册 add by wh ...
设计模式- 主动对象（Active Object）
译者注:1.对象分为主动对象和被动对象,主动对象内部包含一个线程,可以自动完成动作或改变状态,而一般的被动对象只能通过被其他对象调用才有所作为.在多线程程序中,经常把一个线程封装到主动对象里面.2.在 ...
java中关于如何运行jar格式程序的说明
通常情况下,我们用打包工具如Eclipse的export工具制作的jar包是无法通过鼠标双击来运行的. 此时我们需要启动DOS窗体,在DOS窗体中输入java命令运行程序(前提是你的环境变量class ...
windows下安装tern for vim
操作系统:windows8.1 64位 vim:gvim7.4 1.下载tern for vim,去官网直接下载,连接好像都是到github上(https://github.com/marijnh ...
npapi加载失败的几个原因
本文只讨论加载失败的原因,不复述npapi的使用教程 1. 资源文件是否加上 MIMEType命名的id,和html中的<object>的标签是否对应如果不相同加载必然失败: 2. 注册 ...

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

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

随机推荐

热门专题