Set aspect ratio with padding

by Matthew Day

HTML

<div class='box'>
    <!--<div class='content'>1:1</div>-->
</div>

CSS

* {
    box-sizing: border-box;
}
.box{
    position: relative;
	width: 200px;		/* desired width */
    border: 1px solid black;
}
.box:before{
	content: "";
	display: block;
	padding-top: 20%;
}

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

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