兼容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 相关文章推荐
使用隐藏的new来创建对象
Mar 29 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 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中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
Python Paramiko模块的使用实际案例
2018/02/01 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
django基础学习之send_mail功能
2019/08/07 Python
详解Python IO编程
2020/07/24 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
小学生操行评语
2014/04/22 职场文书
公司2015年终工作总结
2015/05/26 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
基于flask实现五子棋小游戏
2021/05/25 Python
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python