Keep container ratios with pure CSS

Container

<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 ratios - just apply the desired class to the "box" element */

.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%;

}