Container

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

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

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

}

Keep container ratios with pure CSS

Alexander

Keep container ratios with pure CSS

Related Content

Gutenberg Grids & Timber ++ Some CSS Grid Magic!

Book Me

Home

Alexander