Você não precisa de JavaScript
para manter a proporção entre Width
e Height
, se quiser manter o Height
proporcional ao Width
, set o Height
com vw (viewport width)
.
Se precisar que o Width seja proporcional ao Height, set o Width
com vh (viewport height)
.
Como você quer um quadrado perfeito, ou seja uma proporção de 1:1, então o vw
do height
será igual a %
do width
.
Segue um exemplo abaixo.:
.bloco {
float: left;
}
.bloco20 {
background-color: teal;
width: 19%;
height: 19vw;
margin: 0.5%;
}
.bloco40 {
background-color: crimson;
width: 39%;
height: 39vw;
margin: 0.5%;
}
<div class="bloco bloco20"></div>
<div class="bloco bloco20"></div>
<div class="bloco bloco20"></div>
<div class="bloco bloco20"></div>
<div class="bloco bloco20"></div>
<div class="bloco bloco40"></div>
<div class="bloco bloco40"></div>
<div class="bloco bloco20"></div>
<div class="bloco bloco20"></div>
width()
não retorna a porcentagem e sim a largura do elemento empx
mesmo que a mesma seja definida em%
.