【ネイティブ化】JavaScriptでbackground: coverみたいなことをする方法

Y.Kogawa

9年前

普段はjQueryに頼りきりでネイティブで書かなきゃいけないような仕事はないんですが、とはいえなんとなくネイティブでも書けないとなぁ。という淡い危機感があったので「jQueryでbackground: coverみたいなことをする方法」をネイティブ化してみました。

結果的にwindowサイズの取得とresizeイベントでIE8対応が必要だったくらいで、あとはすんなりですね。

※IE8〜11、Safari（Mac）、Firefox、Chromeで動作確認しています。

プレビュー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【ネイティブ化】JavaScriptでbackground: coverみたいなことをする方法</title>
<style type="text/css">
html, body {
	height: 100%;
}

body {
	margin: 0;
}

#coverParent {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#cover {
	position: absolute;
}
</style>
</head>
<body>

<div id="coverParent"><img src="image01.jpg" width="1920" height="1280" alt="" id="cover"></div>

<script>
(function(){
	// 使用する変数を宣言
	var win_w, win_h, win_ratio, cover_w, cover_h, cover_ratio, style;

	// 参照する要素をキャッシュ
	var cover = document.getElementById('cover');

	// 画像の縦の比率を求める
	cover_w     = cover.getAttribute('width');
	cover_h     = cover.getAttribute('height');
	cover_ratio = cover_w / cover_h;

	// ウィンドウのリサイズイベントに合わせて計算する
	var fit = function(){
		// ウィンドウサイズを取得
		win_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		win_h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

		// ウィンドウの縦の比率を求める
		win_ratio = win_w / win_h;

		// 画像の比率がウィンドウより大きければ、画像の高さを100%にする
		if(cover_ratio > win_ratio){
			style = [
				'width: auto',
				'height: 100%',
				'margin-top: 0',
				'margin-left: ' + (-(win_h * cover_ratio) / 2) + 'px',
				'top: 0',
				'left: 50%'
			];

		// そうじゃない場合は、画像の幅を100%にする
		}else{
			style = [
				'width: 100%',
				'height: auto',
				'margin-left: 0',
				'margin-top: ' + (-(win_w / cover_ratio) / 2) + 'px',
				'top: 50%',
				'left: 0'
			];

		}
		cover.style.cssText = style.join(';');
	}

	if(window.addEventListener){
		window.addEventListener('resize', fit, false);

	// ～ IE8
	} else if(window.attachEvent){
		window.attachEvent('onresize', fit);

	}
	fit();

}());

</script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>【ネイティブ化】JavaScriptでbackground: coverみたいなことをする方法</title>

html, body {

height: 100%;

}

body {

margin: 0;

}

#coverParent {

width: 100%;

height: 100%;

overflow: hidden;

position: absolute;

top: 0;

left: 0;

z-index: -1;

}

#cover {

position: absolute;

}

</style>

</head>

<body>

(function(){

// 使用する変数を宣言

var win_w, win_h, win_ratio, cover_w, cover_h, cover_ratio, style;

// 参照する要素をキャッシュ

var cover = document.getElementById('cover');

// 画像の縦の比率を求める

cover_w = cover.getAttribute('width');

cover_h = cover.getAttribute('height');

cover_ratio = cover_w / cover_h;

// ウィンドウのリサイズイベントに合わせて計算する

var fit = function(){

// ウィンドウサイズを取得

win_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

win_h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

// ウィンドウの縦の比率を求める

win_ratio = win_w / win_h;

// 画像の比率がウィンドウより大きければ、画像の高さを100%にする

if(cover_ratio > win_ratio){

style = [

'width: auto',

'height: 100%',

'margin-top: 0',

'margin-left: ' + (-(win_h * cover_ratio) / 2) + 'px',

'top: 0',

'left: 50%'

];

// そうじゃない場合は、画像の幅を100%にする

}else{

style = [

'width: 100%',

'height: auto',

'margin-left: 0',

'margin-top: ' + (-(win_w / cover_ratio) / 2) + 'px',

'top: 50%',

'left: 0'

];

}

cover.style.cssText = style.join(';');

}

if(window.addEventListener){

window.addEventListener('resize', fit, false);

// ～ IE8

} else if(window.attachEvent){

window.attachEvent('onresize', fit);

}

fit();

}());

</script>

</body>

</html>

IE8がwindowサイズをinnerWidthで取得できないため win_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; という形でpolyfillしてやります。

addEventListenerもIE8では対応していないので、attachEventを使います。ちなみに、window.onresizeでは競合する可能性があるのでイベントリスナーを使っています。

おわり。