調整滑塊圖像的大小以適應設備屏幕

我正在使用引導程序傳送帶，並且希望將其修改爲始終滑塊適合窗口（或任何其他設備）。這裏是我的解決方案：
調整滑塊圖像的大小以適應設備屏幕

如果imageRatio > winRatio然後
stretch images height to it's max
其他
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(); 
    }); 
});

來源

2013-03-28 mhesabi

第一次你的腳本運行，圖像的大小變化。所以下一次你拿起它，你會得到你設置的圖像的大小，而不是原始的初始高度。您必須將圖像的初始尺寸存儲在某個全局變量中，並將窗口尺寸與它們進行比較。

將這些移入window.load函數中。並使這些變量成爲全局的。

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

來源

2013-03-28 08:59:28

調整滑塊圖像的大小以適應設備屏幕

回答

相關問題