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 相关文章推荐
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
vue实现移动端input上传视频、音频
Aug 18 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
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 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
收集的PHP中与数组相关的函数
2007/03/22 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
Python中关于使用模块的基础知识
2015/05/24 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
2014年计算机专业个人自我评价
2014/01/19 职场文书
大学生秋游活动方案
2014/02/17 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
详解python的内存分配机制
2021/05/10 Python
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python