dededey
9/8/2015 - 9:33 AM

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

box with 1:1 ratio

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

ratio_1:1_box.html
content_copyfile_download
<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.
ratio_1:1_box.css
content_copyfile_download
CSS
.box{
	position: relative;
	width: 50%;		/* desired width */
}
.box:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}