Set the height of a div to be half of whatever the width is

Question

How can I set the height of a div to be exactly half whatever the width is, when the width will change depending on the users screen size?

I have the following set on a div...

#div1 {
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:400px;
    background-color:red;  
}

The width works fine on this, it locks at 400 pixels if the screen gets too narrow and it also stops expanding at 1200 pixels if the screen gets too big. But, I also want the height to change to be exactly half of what the width is at any given time. Something like...

#div1 {
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:width/2;
    background-color:red;  
}

That hasn't worked (which I wasn't really expecting it to).

I'd prefer to use CSS if it's possible, but as I'd also like the height to change if the user manually adjusts the size of the internet window too (like what happens with the width at the moment). I'm not sure it's possible with CSS, however, if there's a way to achieve this by Jquery I'd be happy to use that too.

jsFiddle of the above for reference.

Can anyone help me?

Answer 1

If you're ok with supporting only modern browsers, you can do this: http://jsfiddle.net/kNPfh/

The vw measure is in 1/100th of the viewport width, so 50vw is 50% of screen width.

<div class='halfwidth'></div>

.halfwidth {
    width: 100%;
    height: 50vw;
    background-color: #e0e0e0;
}

if not, you can use: http://jsfiddle.net/ff7WC/

$(window).on( 'resize', function () {
    $('.halfwidth').height( $(this).width() / 2 );
}).resize();

Answer 2

Make sure you have a js file then use this

$(window).load(function(){
    $('.element').height($('.element').width() / 2);
    $(window).resize(function(){
        $('.element').height($('.element').width() / 2);
    });
});

http://jsfiddle.net/Hive7/8CNtU/2/

Answer 3

You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.

CSS:

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

For details, see this article on the subject http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes

You can also use jquery for that, something like:

$('.ss').css('height',width()/2);

Please choose this as the correct answer if it solves your doubt by clicking on the tick symbol to the left.

Answer 4

This is not possible with pure CSS. You have to use jQuery for it to generetate the new sizes. I've found this in SO: Using jQuery To Get Size of Viewport