장치 이미지에 맞도록 슬라이더 이미지의 크기 조정

Question

저는 부트 스트랩 캐 러셀을 사용 중이며 항상 창 (또는 다른 장치)에 맞게 슬라이더를 수정하려고합니다. 여기 내 솔루션입니다 :

다른 다음
stretch images height to it's max
imageRatio > winRatio 경우 stretch images width to it's max

이미지 비율이 나는 이미지와 때 윈도우 비율은 이미지의 비율 난보다 큰에 max-height:100%;max-width:none;을 추가 윈도우 비율보다 큰
덧붙여서 max-width: 100%; max-height: none;

길어서 짧게,이 모든 것들이 작동하지만 어떻게 든 윈도우 이미지 비율과 윈도우 비율을 조정하면 효과가 있습니다 !! 여기 은 console.log (winRatio, imgRatio);

1.0709046454767726 1.5051546391752577 /* this is expected results but */ 
1.1124694376528117 1.1124694376528117 /* when i stop resizing */ 

---

내 HTML :

<div class="row-fluid"> 

    <div id="top-slider" class="carousel slide"> 
     <!-- Carousel pattern mask --> 
     <div class="mask"></div> 

     <!-- Carousel items --> 
     <div class="carousel-inner"> 
      <div class="active item"><img src="img/slider/slide01.jpg" alt="Slide 01" /></div> 
      <div class="item"><img src="img/slider/slide02.jpg" alt="Slide 02" /></div> 
      <div class="item"><img src="img/slider/slide03.jpg" alt="Slide 03" /></div> 
     </div> 

     <!-- Carousel nav --> 
     <div class="carousel-control"> 
      <a class="left" href="#top-slider" data-slide="prev"></a> 
      <a class="right" href="#top-slider" data-slide="next"></a> 
     </div> 
    </div> 

</div> 
<!-- /site top slider --> 

Javascript를 :

// DOM Ready 
jQuery(document).ready(function($){ 

    /* strech homepage top slider's slides to fit device screen 
    ------------------------------------------------------------------- */ 
    function fitSlider() { 
     var wH = $(window).height() - $('#top-header').height(); 
     var wW = $(window).width(); 
     var winRatio = wW/wH; 
     var imgH = $('#top-slider .carousel-inner').height(); 
     var imgW = $('#top-slider .carousel-inner').width(); 
     var imgRatio = imgW/imgH; 
     console.log(winRatio, imgRatio); 

     $('#top-slider').css('height', wH); 

     if (imgRatio > winRatio) 
     { 
      $('#top-slider .carousel-inner .item img').addClass('fit-height'); 
     } 
     else 
     { 
      $('#top-slider .carousel-inner .item img').removeClass('fit-height'); 
     } 
    } 

    // On window resized fire this event 
    $(window).bind('resize',function() { 
     //Update slider 
     fitSlider(); 
    }); 
    // On window loaded fire this event 
    $(window).load(function() { 
     fitSlider(); 
    }); 
}); 

Answer 1

스크립트가 실행 처음으로, 이미지의 크기가 변경. 다음 번에 가져올 때 원래의 초기 높이가 아니라 설정 한 이미지의 크기가 표시됩니다. 이미지의 초기 크기를 일부 전역 변수에 저장하고 창 크기를 비교해야합니다.

이들을 window.load 함수로 이동하십시오. 그리고이 변수들을 전역 적으로 만드십시오.

var imgH = $('#top-slider .carousel-inner').height(); 
var imgW = $('#top-slider .carousel-inner').width();