兼容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中强制执行toString()具体实现
Apr 27 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
js变量提升深入理解
Sep 16 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
vue引入swiper插件的使用实例
Jul 19 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
微信小程序实现首页弹出广告
Dec 03 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
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
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
img的onload的另类用法
2008/01/10 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
正规的求职信范文分享
2013/12/11 职场文书
运动会通讯稿300字
2014/02/02 职场文书
小学数学教学反思
2014/02/02 职场文书
优秀实习生感言
2014/03/01 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
给校长的建议书600字
2014/05/15 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
校庆团日活动总结
2014/08/28 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
合作与交流自我评价
2015/03/09 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS