兼容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编程起步(第三课)
Feb 27 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 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
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php中curl使用指南
2015/02/05 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
使用K.function()调试keras操作
2020/06/17 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
python super()函数的基本使用
2020/09/10 Python
房屋继承公证书
2014/04/10 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
大型公益活动策划方案
2014/08/20 职场文书
研究生个人学年总结
2015/02/14 职场文书
从事会计工作年限证明
2015/06/23 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
5行Python代码实现一键批量扣图
2021/06/29 Python
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis