Se você souber a largura do container na unidade de medida vw
, basta usar esse valor dividido por 4 nos filhos, por exemplo, se o container sempre for do tamanho máximo da tela, uma solução é usar a medidaaltura será de 25vw, se o container for de 80% da tela (ou 80 vw), a altura será de 20vw, etc
Isso porque o valor usado pelo vw é o mesmo independentemente se usado na altura ou largura, assim como o vwvh
noe o heightvmin
:
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
div.row {
width: 25vw;80vw;
display: block;
margin: 0 10vw;
padding: 0;
}
div.col {
width: 20vw; /* ou 25% */
height: 25vw;20vw; /* ou calc(80vw / 4) */
display: block;
float: left;
background-color: darkblue;
margin: 0;
padding: 0;
border: 1px solid darkred;
box-sizing: border-box;
}
<div><<div class="row">
<div class="col"></div>
<div>< <div class="col"></div>
<div>< <div class="col"></div>
<div>< <div class="col"></div>
</div>