Keep aspect ratio of div when resizing window

Question

I have an issue which is a little hard to explain. I have a div which has a 2:1 aspect ratio. And I want it to have a 100% width or height based on the browsers window size.

If the window height is greater than the divs height the the size should be based on 100% width.

And if window height is less than the divs height the size should be based on 100% height.

With my curren approach it is flashing when I size larger.

Look at this link http://acozmo.com/me/ for a demo.

HTML

<section id="container">
</section>

JQuery

function update() {

        var $documentHeight = $(document).height();
        var $windowHeight = $(window).height();
        var $documentWidth = $(document).width();
        var $windowWidth = $(window).width();

        var $container = $('#container');

        if ( $windowHeight >= $documentHeight ) {
            $container.width($windowWidth);
            $container.height($windowWidth / 2);
        }
        if ( $windowHeight < $documentHeight ) {
            $container.width($windowHeight * 2);
            $container.height($windowHeight);
        }
    }

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

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

Answer 1

To resize to fit inside the window while maintaining aspect ratio, set up your container with an initial size and then divide the area width by the container's width to get the scale. You then need a check to make sure that scale doesn't make the height too great. See code below and fiddle - I've added the case where the height is greater than the width too for completeness.

To stop the flashing, throttle your resize function using setTimeout. This will ensure that update is only called once every n milliseconds. You can play with the number until you find the right balance.

var container = $('#container'),
    updateTimeout,
    threshold = 100;

function update() {
    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        width = container.width(),
        height = container.height(),
        scale;

    if ( windowWidth > windowHeight ) {
        scale = windowWidth / width;
        if ( height * scale > windowHeight ) {
            scale = windowHeight / height;
        }
    }
    else {
        scale = windowHeight / height;
        if ( width * scale > windowWidth ) {
            scale = windowWidth / width;
        }
    }
    container.width(Math.round(width * scale));
    container.height(Math.round(height * scale));
}

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

$(window).resize(function() {
    clearTimeout(updateTimeout);
    updateTimeout = setTimeout(update, threshold);
});

Answer 2

It's probably happening because the fact that you are using a second if , instead of an else . . . it hits the first if , shrinks the height, and then hits the second if and increases it.

Try changing this (the second if ):

if ( $windowHeight < $documentHeight ) {

. . . to this:

else {