兼容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 相关文章推荐
没有document.getElementByName方法
Aug 19 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
node.js通过url读取文件
Oct 16 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源码之explode使用说明
2011/08/05 PHP
php获取远程文件内容的函数
2015/11/02 PHP
php设计模式之委托模式
2016/02/13 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
学习python的几条建议分享
2013/02/10 Python
Python查找相似单词的方法
2015/03/05 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
python实现取余操作的简单实例
2020/08/16 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
冰淇淋开店创业计划书
2014/02/01 职场文书
终止劳动合同协议书
2014/04/14 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
2014年法院工作总结
2014/11/24 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript