兼容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 cookie解码函数(兼容ff)
Mar 17 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
vue的for循环使用方法
Feb 12 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
原生JavaScript实现进度条
Feb 19 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
Python回调函数用法实例详解
2015/07/02 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python学习入门之区块链详解
2017/07/25 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
医校毕业生自我鉴定
2014/01/25 职场文书
优秀幼教自荐信
2014/02/03 职场文书
教师读书活动总结
2014/05/07 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
办公室卫生管理制度
2015/08/04 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python
Golang jwt身份认证
2022/04/20 Golang