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

Question

我正在使用引導傳送帶，並希望對其進行修改以使其始終適合窗口（或任何其他設備）中的滑塊。 這是我的解決方案：

如果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; 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();