Height equals width with pure css http://www.mademyday.de/css-height-equals-width-with-pure-css.html

ratio.css

img{
  min-width: 100%;
	height: auto;
}

.content{
  position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

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

/* 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%;
}

ratio.html

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