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

※デベロッパーツール等でソースコードをご確認ください(Please check using Developer tools)

このページの内容が難しいと感じた方はこちら

スポンサーリンク

CSS

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

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

JavaScript

$(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);
   })
});