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

来源：动视网责编：小采时间：2020-11-27 21:18:12

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

利用JS解决ie6不支持max-width,max-height问题的方法:本篇文章主要介绍了利用JS解决ie6不支持max-width,max-height问题的方法。需要的朋友可以过来参考下，希望对大家有所帮助。今天遇到一个关于用js解决ie6不支持支持max-width，max-height的问题，刚开始用jQuery方法来实现，不过一直获取不到css里面的

推荐度：

点击下载本文 文档为doc格式

导读利用JS解决ie6不支持max-width,max-height问题的方法:本篇文章主要介绍了利用JS解决ie6不支持max-width,max-height问题的方法。需要的朋友可以过来参考下，希望对大家有所帮助。今天遇到一个关于用js解决ie6不支持支持max-width，max-height的问题，刚开始用jQuery方法来实现，不过一直获取不到css里面的

本篇文章主要介绍了利用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代码如下：

<p class="viewBigBox">
 <p class="viewBigPic">
 <p><img id="imgid" onload="setPhotoSize(this,730,470)" src="images/viewShow.jpg" alt=""/></p>
 </p>
</p>

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;}

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

推荐度：

点击下载本文 文档为doc格式

标签：解决的方法问题

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐