box with 1:1 ratio source: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

ratio_1:1_box.css

CSS
.box{
	position: relative;
	width: 50%;		/* desired width */
}
.box:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}

ratio_1:1_box.html

<div class='box'> 
	<div class='content'>Aspect ratio of 1:1</div> 
</div>

We need two block elements to achieve the desired behaviour. No images, no Javascript.