.ratio{position:relative;display:block;width:100%;}
.ratio>img,.ratio>picture,.ratio>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ratio::before{content:"";display:block}

/* Common aspect ratios */
.ratio-16x9::before{padding-top:56.25%}
.ratio-4x5::before{padding-top:125%}
.ratio-1x1::before{padding-top:100%}
.ratio-3x2::before{padding-top:66.6667%}
.ratio-21x9::before{padding-top:42.8571%}

/* Utility: contain instead of cover */
.ratio.contain>img,.ratio.contain>picture>img{object-fit:contain}