兼容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 String.replace函数参数实例说明
Jun 06 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
JavaScript作用域链示例分享
May 27 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
js验证账户名是否重复
May 26 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
js基于canvas实现时钟组件
Feb 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
adodb与adodb_lite之比较
2006/12/31 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
PHP重载基础知识回顾
2020/09/10 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
js实现点击生成随机div
2020/01/16 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
Python性能优化技巧
2015/03/09 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
客服主管岗位职责
2013/12/13 职场文书
公司年终奖分配方案
2014/06/16 职场文书
大学毕业生推荐信
2014/07/09 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
2015年司机工作总结
2015/04/23 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
python热力图实现的完整实例
2022/06/25 Python