兼容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 AJAX回调函数this指向问题
Feb 08 Javascript
js中判断控件是否存在
Aug 25 Javascript
js实现表格字段排序
Feb 19 Javascript
采用call方式实现js继承
May 20 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 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代码运行时间查看类代码分享
2011/08/06 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Python中单例模式总结
2018/02/20 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
法制宣传标语
2014/06/23 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript