Question

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.

Answer 1

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

http://jsfiddle.net/536UJ/