Responsive DIVs overlaying on “background-size: contain” - solve the issue where the alert fires

Question

Problem:

I am using a background-size: contain image with DIVs overlaying on top, and I want them to stay stationary relative to the scale and aspect ratio of the image.

It works, but for a small issue wherein the browser's width is less than the background image's. When this happens, you can see the overlay DIVs ( .navbar and #home , respectively) begin to slide out of place, only to immediately snap back to their correct positions once the browser corrects itself.

I've written up a Fiddle that contains an alert. The alert fires when the browser width is less than the background image width. You will need to resize your browser window horizontally to get it to trigger. You can comment out the alert to observe the DIV shifting.

What is causing this, and how can I prevent it?

Code:

var width = $('.bg').width();
var height = $('.bg').height();

var imgWidth = width > height ? 350/325 * height : width;
var imgHeight = height > width ? 325/350 * width : height;
var imgTop = imgHeight * .75 + ((height - imgHeight) / 2);

$('.navbar').css({
    'width': imgWidth,
    'height': imgHeight * .15,
    'top': imgTop + 'px'
});

$(window).on("resize", function() {

    width = $('.bg').width();
    height = $('.bg').height();

    imgWidth = width > height ? 350/325 * height : width;
    imgHeight = height > width ? 325/350 * width : height;
    imgTop = imgHeight * .75 + ((height - imgHeight) / 2);

    if (width < imgWidth) {
        //alert(width + 'x' + height + ', ' + imgWidth + 'x' + imgHeight);
    }

    $('.navbar').css({
        'width': imgWidth,
        'height': imgHeight * .15,
        'top': imgTop + 'px'
    });

});

Answer 1

It jumps because:

You have a rectangular image--350px X 325px. So this means width === 350px and height === 325px .

You are checking whether width > height and height > width in these two lines:

imgWidth = width > height ? 350/325 * height : width;
imgHeight = height > width ? 325/350 * width : height;

ie You are checking whether the width (which starts out at 350px) is greater than height (325), and whether height (325) is greater than width (350).

Taking the second example: The height will not be greater than the width until after you've shrunk the window horizontally 25px (350 - 325) beyond the point where the image starts to shrink. And so, for those first 25px, the height isn't recalculated because height > width is still false.

The easiest remedy for this is simply to check against the offset--check whether width - 25 > height and whether height + 25 > width :

imgWidth = width - 25 > height ? 350/325 * height : width;
imgHeight = height + 25 > width ? 325/350 * width : height;

Also, for what I think is cleaner code, though a more complex fix, check out this fiddle 查看此小提琴