js 图片等比例缩放代码


Posted in Javascript onMay 13, 2010
var scaleImage = function(o, w, h){ 
var img = new Image(); 
img.src = o.src; 
if(img.width >0 && img.height>0) 
{ 
if(img.width/img.height >= w/h) 
{ 
if(img.width > w) 
{ 
o.width = w; 
o.height = (img.height*w) / img.width; 
} 
else 
{ 
o.width = img.width; 
o.height = img.height; 
} 
o.alt = img.width + "x" + img.height; 
} 
else 
{ 
if(img.height > h) 
{ 
o.height = h; 
o.width = (img.width * h) / img.height; 
} 
else 
{ 
o.width = img.width; 
o.height = img.height; 
} 
o.alt = img.width + "x" + img.height; 
} 
} 
}

HTML
<div> 
<p><img src="../comment/img/max.jpg" onload="scaleImage(this,300,300)" alt="pic" /></p> 
<p><img src="../comment/img/2.jpg" onload="scaleImage(this,300,300)" /></p> 
<p><img src="../comment/img/3.jpg" onload="scaleImage(this,300,300)" /></p> 
<p><img src="../comment/img/4.jpg" onload="scaleImage(this,300,300)" /></p> 
</div>
Javascript 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
jstree的简单实例
Dec 01 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
PHP7新特性简述
Jun 11 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 #Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 #Javascript
JavaScript prototype属性使用说明
May 13 #Javascript
js 实现复制到粘贴板的功能代码
May 13 #Javascript
js href的用法
May 13 #Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 #Javascript
Js 随机数产生6位数字
May 13 #Javascript
You might like
phpize的深入理解
2013/06/03 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
提高网站信任度的技巧
2008/10/17 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
Python可跨平台实现获取按键的方法
2015/03/05 Python
python中format()函数的简单使用教程
2018/03/14 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
Python中函数参数调用方式分析
2018/08/09 Python
Python requests模块实例用法
2019/02/11 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
python 画条形图(柱状图)实例
2020/04/24 Python
python基于socket函数实现端口扫描
2020/05/28 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
信息技术课后反思
2014/04/27 职场文书
学校安全防火方案
2014/06/07 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL