창 크기가 jscery 인 전체 화면 이미지 크기를 조정 하시겠습니까?

Question

윈도우 크기 조정 기능이 트리거 될 때 jquery로 전체 화면 이미지를 만들려고합니다. 그러나 나는 이런 종류의 결과를 얻습니다. 이미지 밑에는 어떻게 수정해야할지 모르는 간격을 볼 수 있습니다.

기본 HTML, 창 크기 조정에 이미지 크기를 업데이트

<!-- container --> 
    <div id="container" class="container"> 

     <div class="holder-supersize" id="supersize"> 

      <ul class="background-supersize"> 
       <li><a href="#"><img src="styles/images/IMG_0250.jpg" alt="" width="1000" height="667" /></a></li> 
       <li><a href="#"><img src="styles/images/IMG_0255.jpg" alt="" width="667" height="1000" /></a></li> 
       <li class="active"><a href="#"><img src="styles/images/IMG_0323.jpg" alt="" width="1158" height="772" /></a></li> 
      </ul> 

     </div> 

    </div> 
    <!-- container --> 

JQuery와, 초대형 이미지

$(document).ready(function(){ 

    $(window).resize(function(){ 

     $(".holder-supersize").each(function() { 

      //Define image ratio & minimum dimensions 
      var minwidth = .5*(640); 
      var minheight = .5*(480); 
      var ratio = 480/640; 

      //Gather browser and current image size 
      var imagewidth = $(this).width(); 
      var imageheight = $(this).height(); 
      var browserwidth = $(window).width(); 
      var browserheight = $(window).height(); 

      //Check for minimum dimensions 
      if ((browserheight < minheight) && (browserwidth < minwidth)){ 
       $(this).height(minheight); 
       $(this).width(minwidth); 
      } 
      else 
      { 
       //When browser is taller  
       if (browserheight > browserwidth){ 
        imageheight = browserheight; 
        $(this).height(browserheight); 
        imagewidth = browserheight/ratio; 
        $(this).width(imagewidth); 

        if (browserwidth > imagewidth){ 
         imagewidth = browserwidth; 
         $(this).width(browserwidth); 
         imageheight = browserwidth * ratio; 
         $(this).height(imageheight); 
        } 

       } 

       //When browser is wider 
       if (browserwidth >= browserheight){ 
        imagewidth = browserwidth; 
        $(this).width(browserwidth); 
        imageheight = browserwidth * ratio; 
        $(this).height(imageheight); 

        if (browserheight > imageheight){ 
         imageheight = browserheight; 
         $(this).height(browserheight); 
         imagewidth = browserheight/ratio; 
         $(this).width(imagewidth); 
        } 
       } 
      } 
      return false; 
     }); 

    }); 

}); 

CSS

/* Supersize -------------------------------------------*/ 

.holder-supersize { 
    width:100%; 
    height:100%; 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:0; 
} 

.background-supersize { 
    width:100%; 
    height:100%; 
    overflow:hidden; 
    position:relative; 
} 

.background-supersize li { 
    width:100%; 
    height:100%; 
    overflow:hidden; 
    position:absolute; 
    left:0; 
    top:0; 
    text-align:center; 
} 

.background-supersize li img { 
    /* for image with height < width */ 
    /**/ 
    width:100%; 
    height:auto; 


    /* for image with height > width */ 
    /* 
    width:auto; 
    height:100%; 
    */ 
} 

.background-supersize li , 
.background-supersize a,  
.background-supersize img{ 
    display:none; 
    } 

.background-supersize .active, 
.background-supersize .active a, 
.background-supersize .active img{ 
    display:inline; 
} 

이것은 jsfiddle의 링크이며 actual product을 볼 수있는 링크입니다.

어떤 아이디어가 잘못되었거나 어떻게 해결할 수 있습니까?

Answer 1

너비가 높이와 너비를 고정하여 이미지 기울이기를 방지하는 것처럼 보입니다. 따라서 윈도우의 비율이 같지 않으면 아래쪽 (높거나 좁은 윈도우의 경우) 또는 오른쪽의 스페이스 (짧은/넓은 윈도우의 경우) 중 하나를 차지하게됩니다.

이미지가 기울어지기를 원하면 높이를 창 높이와 같게 만들고 너비를 창 너비와 동일하게 만들어 코드를 단순화 할 수 있습니다.