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 相关文章推荐
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 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
Terran兵种介绍
2020/03/14 星际争霸
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
uploadify 3.0 详细使用说明
2012/06/18 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
Python中optparse模块使用浅析
2015/01/01 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Sanic框架应用部署方法详解
2018/07/18 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
白血病捐款倡议书
2014/05/14 职场文书
五年级学生评语大全
2014/12/26 职场文书
维稳工作承诺书
2015/01/20 职场文书
董事长助理岗位职责
2015/02/11 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang