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



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


----------------------------------
OTHER ASPECT RATIOS
If you want to create other ratios just change the padding-top value of the pseudo element (see example):

/* Other ratios */
.ratio2_1:before{
	padding-top: 50%;
}
.ratio1_2:before{
	padding-top: 200%;
}
.ratio4_3:before{
	padding-top: 75%;
}
.ratio16_9:before{
	padding-top: 56.25%;
}