兼容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 相关文章推荐
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
vue项目中js-cookie的使用存储token操作
Nov 13 Javascript
Webpack3+React16代码分割的实现
Mar 03 Javascript
教你一步步实现一个简易promise
Nov 02 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数组应用之比较两个时间的相减排序
2008/08/18 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
Python中random模块生成随机数详解
2016/03/10 Python
python中join()方法介绍
2018/10/11 Python
Python基本socket通信控制操作示例
2019/01/30 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
Django 拆分model和view的实现方法
2019/08/16 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
在校大学生个人的自我评价
2014/02/13 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
2014年消防工作总结
2014/11/21 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
2014年节能工作总结
2014/12/18 职场文书
商务英语求职信范文
2015/03/19 职场文书
入党转正申请报告
2015/05/15 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
居安思危观后感
2015/06/11 职场文书
保护环境的宣传语
2015/07/13 职场文书
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL