兼容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 相关文章推荐
UI Events 用户界面事件
Jun 27 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
javaScript语法总结
Nov 25 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
Webpack的dll功能使用
Jun 28 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下10件你也许并不了解的事情
2008/09/11 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
jquery创建div 实现代码
2009/04/27 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
js+css实现打字效果
2020/06/24 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
批处理与python代码混合编程的方法
2016/05/19 Python
python 异常处理总结
2016/10/18 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
农村婚礼主持词
2014/03/13 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
公司离职证明标准格式
2014/11/18 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书