兼容ie、firefox的图片自动缩放的css跟js代码分享


Posted in Javascript onAugust 12, 2013

这个功能主要是解决内容页中的图片过大撑出,导致页面比较难看,就需要这样的代码,需要的朋友可以参考下

需求:图片width<=600px,height<=800。

1、利用max-width,max-height使图片等比例自动缩放

代码:

img{max-width: 600px;max-height: 800px;}

由于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事件中,如果图片加载速度很慢的话,可能会有一个小缺陷】

所有我们可以结合这两个一起使用。先用css然后后面再加上js。

Javascript 相关文章推荐
Javascript 表单之间的数据传递代码
Dec 04 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
javascript快速排序算法详解
Sep 17 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 #Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 #Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 #Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 #Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 #Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 #Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 #Javascript
You might like
基于PHPExcel的常用方法总结
2013/06/13 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
Vuex实现数据增加和删除功能
2019/11/11 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
使用python实现扫描端口示例
2014/03/29 Python
Python re模块介绍
2014/11/30 Python
Python运用于数据分析的简单教程
2015/03/27 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
Shell编程面试题
2012/05/30 面试题
Java程序员常见面试题
2015/07/16 面试题
经理岗位职责
2015/02/02 职场文书
公务员年终个人总结
2015/02/12 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
论语读书笔记
2015/06/26 职场文书
投诉书范文
2015/07/02 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
nginx设置资源请求目录的方式详解
2022/05/30 Servers