兼容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 Select标记中options操作方法集合
Oct 22 Javascript
jQuery 使用个人心得
Feb 26 Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 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添加MySQL数据记录代码
2008/06/07 PHP
基于jQuery的history历史记录插件
2010/12/11 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
Python下载懒人图库JavaScript特效
2015/05/28 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
python安装及变量名介绍详解
2020/12/12 Python
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
秋季校运动会广播稿
2014/02/23 职场文书
减负增效提质方案
2014/05/23 职场文书
法制宣传标语集锦
2014/06/25 职场文书
2014年电厂工作总结
2014/12/04 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技