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 相关文章推荐
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
vue 实现锚点功能操作
Aug 10 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页面中文乱码分析
2013/10/29 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
自己编写的类似JS的trim方法
2013/10/09 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python numpy 点数组去重的实例
2018/04/18 Python
python自动化报告的输出用例详解
2018/05/30 Python
pandas 选择某几列的方法
2018/07/03 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
医院办公室主任职责
2013/12/29 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
节约用水广告语60条
2019/11/14 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
详解PyTorch模型保存与加载
2022/04/28 Python
Python sklearn分类决策树方法详解
2022/09/23 Python