兼容ie、firefox的图片自动缩放的css跟js代码分享


Posted in Javascript onJanuary 21, 2012

需求:图片width<=330px,height<=150。
1、利用max-width,max-height使图片等比例自动缩放,代码:

img{max-width: 330px;max-height: 150px;}

由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小。
2、用javascript脚本来兼容ie6,代码如:
var img_width = img.OffsetWidth;<BR>var img_height = OffsetHeight; 
var current_w = (150*img_width)/img_height; 
var current_h = (330*img_height)/img_width; 
if(img_height>150){ 
if(img_width>330){ 
D.css(img,{ 
width:330 + "px", 
height:current_h + "px" 
}) 
}else{ 
D.css(img,{ 
width:current_w + "px", 
height:150 + "px" 
}) 
} 
}else{ 
if(img_width>330){ 
D.css(img,{ 
width:330 + "px", 
height:current_h + "px" 
}) 
}else{ 
D.css(img,{ 
width:img_width + "px", 
height:img_height + "px" 
}) 
} 
}

【注1:D.css为KISSY.DOM.css,引用的是kissy类库中的DOM方法】

【注2:用javascript来控制图片的尺寸页面必须要等图片完全加载出来,所以代码要包含在window.onload事件中,如果图片加载速度很慢的话,可能会有一个小缺陷】

Javascript 相关文章推荐
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
JS 控件事件小结
Oct 31 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 #Javascript
MooBox 基于Mootools的对话框插件
Jan 20 #Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 #Javascript
json的前台操作和后台操作实现代码
Jan 20 #Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 #Javascript
JS中的public和private对象,即static修饰符
Jan 18 #Javascript
DOM 中的事件处理介绍
Jan 18 #Javascript
You might like
PHP开发中常用的8个小技巧
2008/08/27 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
js三种排序算法分享
2012/08/16 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
Python实现图片转字符画的示例代码
2017/08/21 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
python中return不返回值的问题解析
2020/07/22 Python
python类共享变量操作
2020/09/03 Python
Python截图并保存的具体实例
2021/01/14 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
Europcar比利时:租车
2019/08/26 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
经理秘书找工作求职信
2013/12/19 职场文书
五好关工委申报材料
2014/05/31 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书