El primer DIV que pongo genera el HEIGHT en base a la relación aspecto dada partiendo de WIDTH
Mientras que el Segundo se supone que que COLUMNS define el ancho de los hijos, pero parece que algo falla
Código HTML:
<div style="width:160px;" class="ratio r16-9">Contenedor de 160px x 90px</div>
<div style="columns:100px 3">
<div class="ratio r16-9" style="width:inherit;">Contenedor de 0px x 0px</div>
</div>
Código:
.ratio {
position: relative;
}
.ratio:before {
content: '';
display: block;
}
.ratio.r16-9:before {
padding-top: 56.25%;
}
.ratio.r4-3:before {
padding-top: 75%;
}
.ratio.r1-1:before {
padding-top: 100%;
}