兼容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 相关文章推荐
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
原生js实现自定义滚动条
Jan 20 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资源管理框架Assetic简介
2014/06/12 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
为数据添加append,remove功能
2006/10/03 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
JavaScript适配器模式详解
2017/10/19 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
python删除列表中重复记录的方法
2015/04/28 Python
python中随机函数random用法实例
2015/04/30 Python
python读取中文txt文本的方法
2018/04/12 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
python config文件的读写操作示例
2019/09/27 Python
如何在python中执行另一个py文件
2020/04/30 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
求职简历自荐信范文
2013/10/21 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
应届毕业生自荐信
2015/03/04 职场文书
文明旅游倡议书
2015/04/28 职场文书
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技