Use CSS (and maybe JavaScript) to make an element be square (or maintain a specific aspect ratio)

Question

I have a div that I want to have the following characteristics:

• Width = 50% of its parent element
• Height equal to whatever it needs to be in order to

Answer 1

I figured out how to do this without js, though you need to use a transparent image.

Set up a html structure like:

 
Your favorite content here

Use a AxB transparent png for rect_image where AxB is the aspect ratio.

Meanwhile set up a stylesheet like:

.rect_container {width: 50%; position: relative;}
.rect_image {width: 100%; display: block;}
.rect {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}

The important thing here is taking advantage of the fact that images maintain their aspect ratio when resized in one direction. Meanwhile, we need a useable div, so we make the image display as block, wrap it in a div, and put an absolutely positioned div inside that. I distilled this code from something more complicated I actually tested. Works like a charm.