Resize DIV but maintain aspect ratio when window is resized

css, javascript

Solution

Use `width:50%` in css and `window.onresize` event for resize. Have a look

http://jsfiddle.net/536UJ/

Problem

I have a DIV element in my page, that I want to resize when the window is resized, but maintain a square aspect ratio. I want to set the width to be 50% of the browser width, and the height to be equal to the width. How can I do this? If the solution requires Javascript that's fine but I'd prefer not to use jQuery.

Original source