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 相关文章推荐
javascript String 对象
Apr 25 Javascript
javascript options属性集合操作代码
Dec 28 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
Vue实现选择城市功能
May 27 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
在php中取得image按钮传递的name值
2006/10/09 PHP
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
PHP如何使用Memcached
2016/04/05 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
js opener的使用详解
2014/01/11 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Python中Numpy mat的使用详解
2019/05/24 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
监理资料员岗位职责
2014/01/03 职场文书
作风建设整改方案
2014/10/27 职场文书
通讯稿范文
2015/07/22 职场文书
教师个人教学反思
2016/02/23 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python