resize function only works in one dimension

I have a resize function that keeps the main div resized in a consistent ratio. I originally had it resizing according to window width which worked fine (the 1st condition in the function). Then I added a second condition so that if the window is too short it resizes according to the height. This function works correctly with onload.

onresize works for width both when the window is made narrower or wider, but the height condition only works when the window is made shorter . . . if the window is then dragged taller the onresize event doesn't seem to trigger, I have to manually reload the page for the function to resize.

<script>  
function contentResizeHeight() {
    var contentBG = document.getElementById("content");
    var windowHeight = window.innerHeight;
    var newHeight = Math.round(contentBG.offsetWidth * .6);

    if ( windowHeight > newHeight ){
        contentBG.style.height = newHeight + "px";
    }

    if ( windowHeight < newHeight ){
        var newerWidth = windowHeight * 1.666666666666666666;
        var newerHeight = Math.round(newerWidth * .6);

        contentBG.style.height = newerHeight + "px";
        contentBG.style.width = newerWidth + "px";
    }
};
</script>

The #content div is covered by a background image. So the idea is to keep the image aspect ration the same.

div#content{
    background-repeat:no-repeat;
    background-position:center 0px;
    background-size: cover;
    min-width:1024px;
    max-width:1600px;
    min-height:614px;
    max-height:960px;
    margin-right:auto;
    margin-left:auto;
}

I call the function in the body tag

<body onload="contentResizeHeight()" onresize="contentResizeHeight()">

Solution

Achieving this goal with a background image

If you're trying to achieve this with a background image, you can use the help of the CSS background-size: contain;. From Mozilla's site on the keyword contain:

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

Using this logic you can pretty much just scale up each dimension as much as you want based on the window size, and let CSS do the rest of the work.

function contentResizeHeight() {
    var contentBG = document.getElementById("content"),
        windowHeight = window.innerHeight,
        windowWidth = window.innerWidth;

        contentBG.style.height = windowHeight + "px";
        contentBG.style.width = windowWidth + "px";
}

JSFiddle here to see it in action.

When working with a plain div/no background image

This is more for anyone who happens to stumble across this answer looking for the same result as above, but with a plain div (maybe with a background color or something) and no help from CSS: JSFiddle

function contentResizeHeight() {
    var contentBG = document.getElementById("content"),
        windowHeight = window.innerHeight,
        windowWidth = window.innerWidth,
        contentHeight = contentBG.offsetHeight,
        contentWidth = contentBG.offsetWidth,
        newHeight = null,
        newWidth = null;

    if ( windowHeight > contentHeight ){
        // 40 is the buffer zone for increasing the windows width quickly
        if( contentWidth < windowWidth - 40 ){
            newWidth = contentHeight * 1.666666666666666666;

            if( newWidth >= windowWidth - 10 ){
                newHeight = Math.round(newWidth * .6);
            } else {
                newHeight = windowHeight;
            }

        } else {
            newHeight = Math.round(contentWidth * .6);
            newWidth = windowWidth - 4;
        }

    } else if ( windowHeight < contentHeight ){
        newHeight = windowHeight;
        newWidth = newHeight * 1.666666666666666666;
    }

    contentBG.style.height = newHeight + "px";
    contentBG.style.width = newWidth + "px";

}

This is just how I managed to get it working 95%, so if someone has a solution to the window width issue, I'd love to hear it.