aspect ratio

aspect_ratio

/* for normal inline-block element like a img */
/* nothing special */
img{
  min-width: 100%;
	height: auto;
}

/* for any element like a div 
html markup should be

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


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

/* finished when you just want the box height as wide 
to achieve aspect ratios other than 1:1 */

.content{
  position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
/* other aspect 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%;
}