ie6이 max-width 및 max-height를 지원하지 않는 문제를 해결하기 위해 JS를 사용하는 방법

이 글에서는 ie6이 max-width와 max-height를 지원하지 않는 문제를 해결하기 위해 JS를 사용하는 방법을 주로 소개합니다. 도움이 필요한 친구들이 이곳에 와서 참고할 수 있기를 바랍니다.

오늘 js를 사용하여 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=&#39;text/javascript&#39;>
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;}

이것이 이 장의 내용입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요!