Resize slider images to fit device screen

Question

I'm using bootstrap carousel and want to modify it to always slider fit in window (or any other device). here is my solution:

if imageRatio > winRatio then
stretch images height to it's max
else
stretch images width to it's max

when image ratio is greater than window ratio i add max-height:100%;max-width:none; to images and when window ratio is greater than image ratio i add max-width: 100%; max-height: none; max-width: 100%; max-height: none;

Long story short, All these things works but somehow when i resize window image ratio and window ratio are equal !! here is results by `console.log(winRatio, imgRatio);

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

---

my 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 -->

Javascripts:

// 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

The first time your script runs, the size of the image changes. So the next time u fetch it, you will get the size of the image that you have set and not the original initial height. You must store the initial dimensions of the image in some global variable and compare the window dimensions with them.

Shift these into the window.load function. And make these variables global.

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