管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

教程首页 更多教程