利用JS解决ie6不支持max-width,max-height问题的方法


Posted in Javascript onJanuary 02, 2014

今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如

  if($.browser.msie && $.browser.version == 6.0)
  {
    var maxWidth = parseInt($('.viewBigPic img').css('max-width'));
    $('.viewBigPic img').each(function(){
      if ($(this).width() > maxWidth)
        $(this).width(maxWidth);
    });
  }

不知道是什么原因,获取不到css里面的最大值,然后只能用原生的js来实现

js代码如下:

<script type='text/javascript'>
function setPhotoSize(elem, width, height) {
<!--[if IE 6]>
try{
var image=new Image();
image.src=elem.src;
if(image.width>0 && image.height>0){
var rate = (width/image.width < height/image.height)? width/image.width : height/image.height;
if(rate <= 1){
elem.width = image.width*rate;
elem.height = image.height*rate;
}
else {
elem.width = image.width;
elem.height = image.height;
}
}
}catch(e){}
<!--[endif]--> 
}
</script>

部分的html代码如下:
<div class="viewBigBox">
            <div class="viewBigPic">
            <p><img id="imgid" onload="setPhotoSize(this,730,470)" src="images/viewShow.jpg" alt=""/></p>
            </div>
           </div>

css样式如下:
.viewBigBox{ border:1px solid #e3e3e3; background-color:#ffffff; padding:1px;  margin-top:18px;}
.viewBigPic{ background-color:#f7f7f7;padding:20px 14px;}
.viewBigPic p{display:table-cell;width:730px; line-height:470px; overflow:hidden; vertical-align:middle; text-align:center; height:470px;*font-size:390px;}
//实现图片垂直居中,主要运用了font-size与height的比例
.viewBigPic p img{ vertical-align:middle; max-height:470px; max-width:730px;}
Javascript 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
javascript判断office版本示例
Apr 11 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 #Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 #Javascript
jQuery简单实现banner图片切换
Jan 02 #Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 #Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 #Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 #Javascript
js/jQuery简单实现选项卡功能
Jan 02 #Javascript
You might like
虫族 Zerg 历史背景
2020/03/14 星际争霸
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
smarty中常用方法实例总结
2015/08/07 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
js对象数组按属性快速排序
2011/01/31 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
python面试题之列表声明实例分析
2019/07/08 Python
Python3内置模块random随机方法小结
2019/07/13 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
python 实现让字典的value 成为列表
2019/12/16 Python
Python dict的常用方法示例代码
2020/06/23 Python
Python 操作 MySQL数据库
2020/09/18 Python
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
一套Delphi的笔试题二
2013/05/11 面试题
结构工程研究生求职信
2013/10/13 职场文书
医学院毕业生自荐信
2013/11/08 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
保密普查工作实施方案
2014/02/25 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
十岁生日答谢词
2015/01/05 职场文书
小学数学教师研修日志
2015/11/13 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers