Getting the height of a background image resized using "background-size: contain"

Question

So I have an image gallery. Each image is a background-image that stretches across the entire page.

To ensure that every image uses the maximum available width, I give it the following background-size:

background-size: 100% auto;

However, some of the images are taller than the available screen height.

To make sure the image is visible in full (at least using scroll bars), I would need to give the body element the height of the resized background image.

However, there seems to be no way to get hold of the resized background image's height in JavaScript.

Is this true? Do I have to resort to normal image elements after all?

There are many approaches to getting the size of a static background image, like How do I get background image size in jQuery? but they obviously don't apply here.

Answer 1

The key is to use the static image's dimensions, calculate the aspect ratio of the image, and then use the actual element's dimensions to figure out the computed dimensions of the resized image.

For instance, lets assume you had the following:

html, body { height:100%; }
body {
    background-image: url('http://placehold.it/50x100');
    background-repeat: no-repeat;
    background-size: 100% auto;
}

The static image's dimensions are 50x100, and it is sized to take up a width of 100% of the body element. Therefore the body element's width would be equal to the resized image's width. If you wanted to calculate the resized height of the image, you would just use the image's aspect ratio. In this case, the image's resized height would be 800px, because (400*100)/50 = 800

EXAMPLE HERE

var img = new Image();
img.src = $('body').css('background-image').replace(/url\(|\)$/ig, "");

$(window).on("resize", function () {
    $('body').height($('body').width() * img.height / img.width);
}).resize();

Pure JS approach: EXAMPLE HERE

var img = new Image();
img.src = window.getComputedStyle(document.body).getPropertyValue("background-image").replace(/url\(|\)$/ig, "");

function resize(){
    var bgHeight = document.body.offsetWidth * img.height / img.width;
    document.body.style.height = bgHeight + 'px';
}
window.onresize = resize; resize();

The pure JS method is going to be the fastest, as demonstrated by this jsPerf example.

Answer 2

This worked for me (inside a slider):

<!-- CSS -->
    <style>
        div.img { 
            background-repeat: no-repeat;
            background-position: center center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        div.img:nth-of-type(1) {background-image: url('img.jpg');}
        div.img:nth-of-type(2) {background-image: url('img.jpg'); 
        }
    </style>

    <!-- HTML -->
    <div class-"img"></div>
    <div class-"img"></div>