【jQuery】ウィンドウの高さに合わせて正方形の要素を拡大縮小表示させるテクニックのデモページ(Demo page)

.list {
  overflow: hidden;
  margin: 0 auto;
}

.list li {
  float: left;
  text-align: center;
  color: #fff;
  border: 1px solid #ccc;
  background: #000;
}
  

$(function() {
  var w_height = $(window).outerHeight();
  var w_height2 = w_height/2;
  var w_height3 = w_height/3;
  var w_height4 = w_height/4;
  var w_height5 = w_height/3 * 2;

  $(".list").css("width",w_height);
  $(".list").css("height",w_height);

  $(".list li").css("width",w_height4);
  $(".list li").css("height",w_height4);

  $(window).resize(function(){
    var w_height = $(window).outerHeight();
    var w_height2 = w_height/2;
    var w_height3 = w_height/3;
    var w_height4 = w_height/4;
    var w_height5 = w_height/3 * 2;

    $(".list").css("width",w_height);
    $(".list").css("height",w_height);

    $(".list li").css("width",w_height4);
    $(".list li").css("height",w_height4);
   })
});