调整滑块图像的大小以适合设备屏幕

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