WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

画像をウインドウにフィットさせる

$(window).on('resize',function(){
  setBG();
});

function setBG() {
  var imgW = 画像の横幅;
  var imgH = 画像の高さ;
  var winW = $(window).width();
  var winH = $(window).height();
  var scaleW = winW / imgW;
  var scaleH = winH / imgH;
  var fixScale = Math.max(scaleW, scaleH);
  var setW = imgW * fixScale;
  var setH = imgH * fixScale;
  var moveX = Math.floor((winW - setW) / 2);
  var moveY = Math.floor((winH - setH) / 2);
  $('#bg').css({
    'width': setW,
    'height': setH,
    'left' : moveX,
    'top' : 0,
    'display':'block'
  });
}