JS控制图片等比例缩放的示例代码


Posted in Javascript onDecember 24, 2013
<SCRIPT language="JavaScript">
function DrawImage(ImgD,FitWidth,FitHeight){   
    var image=new Image();   
    image.src=ImgD.src;   
    if(image.width>0 && image.height>0){   
        if(image.width/image.height>= FitWidth/FitHeight){   
            if(image.width>FitWidth){   
                ImgD.width=FitWidth;   
                ImgD.height=(image.height*FitWidth)/image.width;   
            }   
            else{   
                ImgD.width=image.width;   
                ImgD.height=image.height;   
            }   
        }   
        else{   
            if(image.height>FitHeight){   
                ImgD.height=FitHeight;   
                ImgD.width=(image.width*FitHeight)/image.height;   
            }   
            else{   
                ImgD.width=image.width;   
                ImgD.height=image.height;   
            }   
        }   
    }   
}   
</script>

调用方法:
<a href="admin/<? echo $rscase['path']?>" target="_blank"><img src="admin/<? echo $rscase['path']?>" alt="点击放大图片" width="180" height="180" onload='javascript:DrawImage(this,180,);' hspace="3" vspace="3" border="0" /></a>
Javascript 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
jquery 表单取值常用代码
Dec 22 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
js异步编程小技巧详解
Aug 14 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 #Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 #Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 #Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 #Javascript
JS刷新当前页面的几种方法总结
Dec 24 #Javascript
js中indexof的用法详细解析
Dec 24 #Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 #Javascript
You might like
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
Python守护进程实现过程详解
2020/02/10 Python
Python版中国省市经纬度
2020/02/11 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
软件设计的目标是什么
2016/12/04 面试题
安全生产检讨书
2014/01/21 职场文书
农民工创业典型事迹
2014/01/25 职场文书
献爱心标语
2014/06/21 职场文书
信访工作汇报材料
2014/10/27 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL