Best way to resize top banner images (viewport/html)

Question

I'm trying to find a better way to resize top banner images, creating different images that fit according the viewport orientation and viewport size without the image be "cutted" or distorced. I created the following code (css + js), and I would like to know if is the proper way, or if exist a better one.

CSS to <img> or <div> with background-image:

max-width: 100%; width: auto; height: auto;

JS:

$(document).ready(function () {
    resizeViewPort();
});

$(window).resize(function () {
    resizeViewPort();
});

function resizeViewPort() {
    alert(($(window).height() / $(window).width()).toFixed(2));

    var height = $(window).height(), width = $(window).width();
    var scale = (height / width).toFixed(2);

    if (scale >= 1.7 && scale <= 1.8) {
        if (height <= 736) { // 736x414
            alert("Mobile PORTRAIT");
        }
    }
    else if (scale >= 1.3 && scale <= 1.6) {
        if (height <= 1024) { // 1024x768
            alert("Tablet PORTRAIT");
        }
    }
    else if (scale >= 0.6 && scale <= 0.8) {
        if (height <= 768) { // 768x1024
            alert("Tablet LANDSCAPE or Desktop 4:3");
        } else if (height <= 900) { // 900x1440
            alert("Desktop HD 16:10");
        } else if (height <= 1200) { // 1200x1920
            alert("Desktop FullHD 16:10");
        }
    }
    else if (scale >= 0.5 && scale < 0.6) {
        if (height <= 414) { // 414x736
            alert("Mobile LANDSCAPE");
        } else if (height <= 720) { // 720x1280
            alert("Desktop HD 16:9");
        } else if (height <= 1080) { // 1080x1920
            alert("Desktop FullHD 16:9");
        } 
    }
}

Answer 1

Using the solution of Saumil Soni, Germano Plebani and http://stephen.io/mediaqueries/, I reach the following solution (thank you all!):

/* TOP BANNER */

/* For mobile phones: */
@media only screen and (max-width: 414px) and (orientation : portrait) {
    .tp-banner {
        background-image: url(../images/style/slider/slide414x736.jpg);
        background-size: cover;
    }
}

@media only screen and (max-width: 736px) and (orientation : landscape) {
    .tp-banner {
        background-image: url(../images/style/slider/slide736x414.jpg);
        background-size: cover;
    }
}

/* For tablets: */
@media only screen and (min-width: 533px) and (orientation : portrait) {
    .tp-banner {
        background-image: url(../images/style/slider/slide768x1024.jpg);
        background-size: cover;
    }    
}

@media only screen and (min-width: 800px) and (orientation : landscape) {
    .tp-banner {
        background-image: url(../images/style/slider/slide1024x768.jpg);
        background-size: cover;
    }    
}

/* For desktop: */
@media only screen and (min-width: 1024px) and (min-height: 768px)  {
    .tp-banner {
        background-image: url(../images/style/slider/slide1024x768.jpg);
        background-size: cover;
    }    
}

@media only screen and (min-width: 1280px) and (min-height: 720px)  {    
    .tp-banner {
        background-image: url(../images/style/slider/slide1280x720.jpg);
        background-size: cover;
    }
}

@media only screen and (min-width: 1440px) and (min-height: 900px)  {
    .tp-banner {
        background-image: url(../images/style/slider/slide1440x900.jpg);
        background-size: cover;
    }    
}

@media only screen and (min-width: 1920px) and (min-height: 1080px)  {
    .tp-banner {
        background-image: url(../images/style/slider/slide1920x1080.jpg);
        background-size: cover;
    }    
}

@media only screen and (min-width: 1920px) and (min-height: 1200px)  {
    .tp-banner {
        background-image: url(../images/style/slider/slide1920x1200.jpg);
        background-size: cover;
    }
}

With this solution you can upgrade to fits all resolutions you want. (For example, adding 1600x900 image to others desktop devices and 640x320 to new Galaxy Mobiles)

Answer 2

I guess a better way to resize images is through media queries as it is purely a CSS based approach and a HTML recommendation,

    @media only screen and (max-width: 768px) {
    /* For mobile phones: */

    }

    @media only screen and (min-width: 600px) {
    /* For tablets: */

    }


    @media only screen and (min-width: 768px) {
         /* For desktop: */

    }

Within the media queries you can specify the dimensions of the banner image that you want for mobile portrait, tablet portrait or full desktop.

UPDATE: To detect whether the device is in landscape or portrait mode,

 @media screen and (orientation:portrait) {

 }
 @media screen and (orientation:landscape) {

 }

Answer 3

Maybe you are interested in CSS only solution with:

background-size: cover;

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.

Or:

background-size: contain;

Scale the image to the largest size such that both its width and its height can fit inside the content area.