JS等比例缩小图片尺寸的实例


Posted in Javascript onFebruary 27, 2013

为了提升用户体验,网站用户在上传图片的时候,我们不能够让用户自己去处理图片以达到我们的要求。

而通常像淘宝上商品实物展示这样的页面,我们需要控制的主要是图片的宽度。

又考虑到html页面解析顺序可能导致的一些问题,决定通过定义一个简单的功能函数,然后在img元素中添加onload事件来调用的方式进行实现,代码如下:

JS部分

<script type="text/javascript">
 function changeImg(objImg)
 {
     var most = 690;        //设置最大宽度
     if(objImg.width > most)
     {
         var scaling = 1-(objImg.width-most)/objImg.width;    
         //计算缩小比例
         objImg.width = objImg.width*scaling;
         objImg.height = objImg.height;            //img元素没有设置高度时将自动等比例缩小         //objImg.height = objImg.height*scaling;    //img元素设置高度时需进行等比例缩小
     }
 }
 </script>

HTML调用部分

 <img src="" onload="changeImg(this);" />
Javascript 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
JQuery切换显示的效果实例代码
Feb 27 #Javascript
innerText和textContent对比及使用介绍
Feb 27 #Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 #Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 #Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 #Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 #Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 #Javascript
You might like
drupal 代码实现URL重写
2011/05/04 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
php 强制下载文件实现代码
2013/10/28 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
python可视化实现代码
2019/01/15 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
合同纠纷调解书
2015/05/20 职场文书
教师节老师寄语
2015/05/28 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书