兼容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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
javascript闭包的理解
Apr 01 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 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 strnatcmp()函数的用法总结
2013/11/27 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
python文件操作整理汇总
2014/10/21 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
Python实现AI换脸功能
2020/04/10 Python
学习python需要有编程基础吗
2020/06/02 Python
python如何停止递归
2020/09/09 Python
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
保证书格式范文
2014/04/28 职场文书
大学新生军训方案
2014/05/03 职场文书
应届生找工作求职信
2014/06/24 职场文书
集体生日活动方案
2014/08/18 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
见习报告的格式
2014/10/31 职场文书
小学感恩节活动总结
2015/03/24 职场文书
社区党务工作总结2015
2015/05/19 职场文书
使用Apache Camel表达REST服务的方法
2022/06/10 Servers