兼容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代码
Oct 09 Javascript
使用JavaScript库还是自己写代码?
Jan 28 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
leaflet的开发入门教程
Nov 17 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 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处理json时中文问题的解决方法
2011/04/12 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
python友情链接检查方法
2015/07/08 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
python去除字符串中的换行符
2017/10/11 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
python求质数的3种方法
2018/09/28 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
贷款委托书范本
2014/04/08 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
保安辞职信范文
2015/02/28 职场文书
法制教育主题班会
2015/08/13 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
redis缓存存储Session原理机制
2021/11/20 Redis
vue实现简易音乐播放器
2022/08/14 Vue.js