CSSを使い、calc(100% / 3);とすることで横幅を動的に設定することができるが、縦も連動して正方形を描くようにしたい。

方法

  1. JavaScriptの[element].getBoundingClientRect().widthで幅を取得。
  2. [element].style.height に求めた幅を適応
  3. resize イベントが起こったときに、これらを実行する

コード

<!doctype html>
<body>
  <div class='row'><div class='item blue'>1</div><div class='item yellow'>2</div><div class='item red'>3</div>
  </div>
</body>
<style>
  .item{
      display:inline-block;
      width:calc(100% / 3);
  }
  .blue{
      background-color:blue;
  }
  .yellow{
      background-color:yellow;
  }
  .red{
      background-color:red;
  }
</style>
<script>
  function resize(){
      var items = document.getElementsByClassName('item');
      for(var i = 0;i < items.length;i++){
          var width = items[i].getBoundingClientRect().width;
          items[i].style.height = width + 'px';
      }
  }
  window.addEventListener('resize', resize);
  resize();
</script>
</html>