兼容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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
深入认识JavaScript中的函数
Jan 22 Javascript
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
js实现图片轮播效果
2015/12/19 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Python中请使用isinstance()判断变量类型
2014/08/25 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
python生成ppt的方法
2018/06/07 Python
python批量修改图片大小的方法
2018/07/24 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
经典演讲稿汇总
2014/05/19 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
百年校庆感言
2015/08/01 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
素质教育学习心得体会
2016/01/19 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript