兼容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 25 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
JavaScript 与 TypeScript之间的联系
Nov 27 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实现百度网盘图片直链的代码分享
2012/11/01 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
微信红包随机生成算法php版
2016/07/21 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
javascript globalStorage类代码
2009/06/04 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
快速入门Vue
2016/12/19 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
koa socket即时通讯的示例代码
2018/09/07 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
最大K个数问题的Python版解法总结
2016/06/16 Python
Python内置加密模块用法解析
2019/11/25 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
关于安全的标语
2014/06/10 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2014年学前班工作总结
2014/12/08 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
学校党支部承诺书
2015/04/30 职场文书
大学校园招聘会感想
2015/08/10 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL