Seleccionar varios elementos con la misma clase

[jorgecanto]

Hola.

En mi página tengo una serie de divs que quiero que tengan una altura proporcional al ancho del propio div. Para esto imagino que primero debo extraer el ancho de cada elemento con javascript y después aplicarle el mismo alto.

Este es mi código html:

Código HTML:

<div class="grid">
          <a href=""><div class="box size1" style="background-image: url('img/01.jpg');"></div></a>
          <a href=""><div class="box size2" style="background-image: url('img/21.jpg');"></div></a>
          <a href=""><div class="box size2" style="background-image: url('img/15.jpg');"></div></a>
          <a href=""><div class="box size3" style="background-image: url('img/07.jpg');"></div></a>
          <a href=""><div class="box size4" style="background:#fff;"></div></a>
          <a href=""><div class="box size5" style="background-image: url('img/27.jpg');"></div></a>
          <a href=""><div class="box size2" style="background-image: url('img/35.jpg');"></div></a>
          <a href=""><div class="box size1" style="background-image: url('img/32.jpg');"></div></a>
          <a href=""><div class="box size6" style="background-image: url('img/33.jpg');"></div></a>
          <a href=""><div class="box size5" style="background-image: url('img/26.jpg');"></div></a>
          <a href=""><div class="box size4" style="background-image: url('img/24.jpg');"></div></a>
        </div>
 

El código CSS para estos elementos:

Código CSS:

/* PORTFOLIO GRID */
.grid .box {
  background-size:cover;
  background-position:center center;
}
.size1 {
  width:50%;
  height:800px;
  float:left;
}
.size2 {
  width:50%;
  height:400px;
  float:left;
}
.size3 {
  width:100%;
  height:400px;
  background-position:center left !important;
  float:left;
}
.size4 {
  width:35%;
  height:400px;
  float:left;
}
.size5 {
  width:65%;
  height:400px;
  float:left;
}
.size6 {
  width:50%;
  height:400px;
  margin-top:-400px;
  float:left;
}
 

Y el código javascript:

Código Javascript:

function postControl() {
 
      var width1 = $(".size1").width();
      var elemento1 = document.querySelector(".size1");
      elemento1.style.height = width1 + "px";
 
      var width2 = $(".size2").width();
      var elemento2 = document.querySelector(".size2");
      elemento2.style.height = width1 * 0.5 + "px";
 
      var width3 = $(".size3").width();
      var elemento3 = document.querySelector(".size3");
      elemento3.style.height = width3 * 0.35 + "px";
 
      var width4 = $(".size4").width();
      var elemento4 = document.querySelector(".size4");
      elemento4.style.height = width4 * 0.928 + "px";
 
      var width5 = $(".size5").width();
      var elemento5 = document.querySelector(".size5");
      elemento5.style.height = width5 * 0.5 + "px";
 
      var width6 = $(".size6").width();
      var elemento6 = document.querySelector(".size6");
      elemento6.style.height = width6 * 0.5 + "px";
      elemento6.style.top = width6 * 0.5 + "px";
 
  };
 

El javascript funciona perfectamente. El problema es que en dos elementos con la misma clase, solo funciona con el primero. Esto pasa en todos los elementos que se repiten.

¿Existe alguna forma de conseguir que cada parte del javascript aplique a todos los elementos de la misma clase?