jQueryを使って、ウィンドウサイズに合わせて画像を拡大縮小し、全面に表示する方法です。
画像の縦横比率は保ったままに、ウィンドウの全面を覆うように拡大縮小を行っています。ウィンドウのリサイズの際には、画像もアニメーションでリサイズします。
サンプルはこちら

HTMLファイル内では、画像全面表示のための関数の実行と、ウィンドウリサイズ時の処理を記述しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Adjust Image</title>
<link rel="stylesheet" type="text/css" href="common/css/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="common/css/style.css" media="all" />
<script type="text/javascript" src="common/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="common/js/jquery.easing-1.3.min.js"></script>
<script type="text/javascript" src="common/js/functions.js"></script>
<script type="text/javascript">
$(function() {
	var time = 1000;
	var time_resize = null;
	var image = $("div#image");
	$(window).bind("load", function() {
	adjustImage(image, 0);
		$(window).resize(function() {
			if (time_resize) {
				clearTimeout(time_resize);
			}
			time_resize = setTimeout(function() {adjustImage(image, time)}, 100);
		});
	});
});
</script>
</head>
<body>
 
 
 
<div id="image">
<div class="inner">
<img src="images/image.jpg" alt="" />
</div><!-- inner -->
</div><!-- image -->
 
 
 
</body>
</html>

外部JavaScriptファイル「functions.js」に、画像全面表示のための関数を記述しています。
ウィンドウを覆い尽くすように画像サイズを拡大縮小して、センター表示にしています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function adjustImage(image, time) {
	var image_width = image.find("img").width();
	var image_height = image.find("img").height();
	var width = 0;
	var height = 0;
	var margin_left = 0;
	var margin_top = 0;
	var ratio_outer = $(window).width()/$(window).height();
	var ratio_inner = image_width/image_height;
	if (ratio_outer > ratio_inner) {
		width = $(window).width();
		height = width/ratio_inner;
	} else {
		height = $(window).height();
		width = height*ratio_inner;
	}
	margin_left = Math.floor(($(window).width()-width)/2);
	margin_top = Math.floor(($(window).height()-height)/2);
	image.find("img").animate({width:width, height:height}, {duration:time, easing:"easeOutQuart"});
	image.animate({top:margin_top, left:margin_left}, {duration:time, easing:"easeOutQuart"});
}

画像表示のためのCSSの箇所は次のようになっています。

1
2
3
4
5
6
7
div#image {
	position: fixed;
	overflow: hidden;
}
div#image div.inner {
	position: relative;
}