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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
浅谈小程序 setData学问多
Feb 20 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
介绍Python中的fabs()方法的使用
2015/05/14 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
优秀学生干部个人的自我评价
2013/10/04 职场文书
采购员岗位职责
2013/11/15 职场文书
物理教师自荐信范文
2013/12/28 职场文书
基层工作经历证明
2014/01/13 职场文书
开业庆典答谢词
2014/01/18 职场文书
服务质量承诺书
2014/03/27 职场文书
走进敬老院活动总结
2014/07/10 职场文书
个人收入证明范本
2014/09/18 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
建党伟业电影观后感
2015/06/01 职场文书
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android