JS图片等比例缩放方法完整示例


Posted in Javascript onAugust 03, 2016

本文实例讲述了JS图片等比例缩放方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript自动按比例显示图片,按比例压缩图片显示</title>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
</script>
</head>
<body>
<br />
<img src="1.jpg"
   border="0"
 width="0"
 height="0"
 onload="AutoResizeImage(100,0,this)"
 />
width:100px
<br />
<br />
<img src="1.jpg"
   border="0"
 width="0"
 height="0"
 onload="AutoResizeImage(0,100,this)"
 />
height:100px
<br />
<br />
<img src="1.jpg"
   border="0"
 width="0"
 height="0"
 onload="AutoResizeImage(100,100,this)"
 />
width:100px height:100px
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 模拟用户单击事件
Dec 31 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 #Javascript
JavaScript中的冒泡排序法
Aug 03 #Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 #Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 #Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 #Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 #Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 #Javascript
You might like
PHP IPV6正则表达式验证代码
2010/02/16 PHP
php实现监听事件
2013/11/06 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
python代码制作configure文件示例
2014/07/28 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python3中exp()函数用法分析
2019/02/19 Python
基于python实现学生信息管理系统
2019/11/22 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
使用django自带的user做外键的方法
2020/11/30 Python
创建索引时需要注意的事项
2013/05/13 面试题
幼儿园家长会欢迎词
2014/01/09 职场文书
光盘行动倡议书
2014/02/02 职场文书
2014年教育工作总结
2014/11/26 职场文书
骨干教师事迹材料
2014/12/17 职场文书
详解redis在微服务领域的贡献
2021/10/16 Redis
java中如何截取字符串最后一位
2022/07/07 Java/Android