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

更新时间：2014年01月02日 10:02:46 作者：

本篇文章主要介绍了利用JS解决ie6不支持max-width,max-height问题的方法。需要的朋友可以过来参考下，希望对大家有所帮助

今天遇到一个关于用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&DHTML基础知识
首先请下载JScript.chm这本手册，无论新手老手，有一本手册是免不了的，特别是对于新手，如果你没有空翻犀牛书，那么这本手册将是你了解这门语言的首选。下面所讲的大多数，手册上可以没有提及，或提及很少的内容。
2008-07-07
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
这篇文章主要介绍了Bootstrap弹出带合法性检查的登录框实例代码【推荐】的相关资料,需要的朋友可以参考下
2016-06-06
小程序实现带索引的城市列表
这篇文章主要为大家详细介绍了小程序实现带索引的城市列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
基于JavaScript实现在新的tab页打开url
这篇文章主要介绍了基于JavaScript实现在新的tab页打开url 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
Bootstrap超大屏幕的实现代码
这篇文章主要为大家详细介绍了Bootstrap超大屏幕的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
Javascript中Eval函数的使用说明
JavaScript有许多小窍门来使编程更加容易。其中之一就是eval()函数，这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。
2008-10-10
Bootstrap popover用法详解
这篇文章主要为大家详细介绍了Boostrap popover用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
用JS编写选项卡效果
这篇文章主要为大家详细介绍了用JS编写选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
IScroll5 中文API参数说明和调用方法
IScroll是移动页面上被使用的一款仿系统滚动插件。IScroll5相对于之前的IScroll4改进了许多，使得大家可以更方便的定制所需的功能了。
2016-05-05
JavaScript中数据结构与算法(五)：经典KMP算法
这篇文章主要介绍了JavaScript中数据结构与算法(五)：经典KMP算法,本文详解了KMP算法的方方面在,需要的朋友可以参考下
2015-06-06