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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
js消除图片小游戏代码
Dec 11 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
JS实现水平移动与垂直移动动画
Dec 19 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
php修改时间格式的代码
2011/05/29 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
试用php中oci8扩展
2015/06/18 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python迭代器实例简析
2014/09/25 Python
python计算一个序列的平均值的方法
2015/07/11 Python
Python模拟百度登录实例详解
2016/01/20 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
python机器学习之随机森林(七)
2018/03/26 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
python查看数据类型的方法
2019/10/12 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
新闻专业个人求职信
2013/12/19 职场文书
基层工作经历证明
2014/01/13 职场文书
开展读书活动总结
2014/06/30 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
先进个人总结范文
2015/02/15 职场文书