兼容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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
用JavaScript显示随机图像或引用
Apr 21 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
js实现表格单列按字母排序
Aug 12 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
javascript解析json实例详解
2014/11/05 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
python机器学习之神经网络(一)
2017/12/20 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
六十大寿答谢词
2014/01/12 职场文书
《掌声》教学反思
2014/02/23 职场文书
信用卡工作证明范本
2015/06/19 职场文书
初中政治教学反思
2016/02/23 职场文书