Twitter

画像を全画面背景にする

2013/01/25 | jquery | コメント (0)

jQueryを利用して画像を全画面にフィットさせる方法。
cssによるbackground指定ではなく、htmlに記述した画像をフィットさせてz-indexで下に敷く形をとっています。

【html/css】

<img src="./img/XXXXX.jpg" width="100%" height="100%" id="bg" />
#bg {
	position: fixed;
	z-index: -1;
}

【js】

$(function(){
	setSize();
	$(window).resize(function(){
	   setSize();
	});
});

function setSize() {
	//画像サイズ指定
	var imgW = 1000;
	var imgH = 650;

	//ウィンドウサイズ取得
	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' : moveY
	});
}

0 Comments»

コメントはまだありません。

このコメント欄の RSS フィード TrackBack URI

コメントをどうぞ »

初めてコメントされる方は管理人の承認が必要となります。承認されるまではコメントは表示されませんのでご了承ください。

CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top