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?