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;}
利用JS解决ie6不支持max-width,max-height问题的方法
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@