backstretch.jsなどのようにウィンドウ全画面や特定要素サイズに合わせるプラグインは、探せばそれなりにあると思います。

ただ、こういったものは背景であることが制作にあたってはネックになることがあるのではないでしょうか？

最近だとスライダーのプラグインを使うことが多いと思いますが、その設置したスライダーをウィンドウ全画面や特定要素サイズに合わせるJSを書きました。

ページにアクセスした時、ウィンドウをリサイズした時に

・高さを取得し指定の要素に高さを指定（ここではスライダーを覆うブロック要素）
・その中にあるスライダー画像にも同じ高さを設定
・高さを基準にしているので、ページの高さがある場合どうしても画像の横幅が出るのでセンター寄せしてはみ出た部分を隠す

やってることはこれだけです。

ソースは以下です。

まずはhtml。
センター寄せが必要なので、スライダーの外にdivを増やしています。

<section id="vi">

<div id="mainimg">
<div id="maininner">

<!-- 設置したスライダー -->
<div class="flexslider">
<ul class="slides">
	<li><img src="pageimg/00/vi01.png" alt="" id="vi01"></li>
	<li><img src="pageimg/00/vi02.png" alt="" id="vi02"></li>
	<li><img src="pageimg/00/vi03.png" alt="" id="vi03"></li>
</ul>
</div><!-- / .flexslider -->

</div><!-- / #maininner -->
</div><!-- / #mainimg -->

</section><!-- / #vi -->

<header>
<h1><img src="common/img/logo-vi.png"  width="119" height="70"></h1>
<div id="glnv">
<ul>
	<li><a href="./"><img src="common/img/glnv01.png" alt="TOP" width="21" height="8"></a></li>
	<li><a href="#look"><img src="common/img/glnv02.png" alt="STYLING" width="44" height="8"></a></li>
	<li><a href="#itemlist"><img src="common/img/glnv03.png" alt="ITEM" width="24" height="8"></a></li>
	<li><a href="#about"><img src="common/img/glnv04.png" alt="INFORMATION" width="77" height="8"></a></li>
</ul>
</div><!-- / #glnv -->
</header>

続いて、css。
#maininnerにleft:50%を設定。センターにするにはmargin-leftにスライダー横幅の値の半分をマイナス値で設定しないといけませんが、windowの高さによって可変なので、JSで設定します。
外側にはoverflow:hiddenをお忘れなく。

#vi { position:relative; z-index:2; background:#eff2f1; overflow:hidden;  }
#vi #mainimg { width:100%; text-align:center; overflow:hidden; }
#vi #maininner { position:absolute; left:50%; }
#vi .slides { background:#eff2f1; }
#vi .slides img { z-index:10; margin-top:-37px; }
#vi h1 { position:absolute; top:50%; left:50%; margin-top:-35px; margin-left:-60px; z-index:3; }
#vi h1 img { height:70px; width:auto; }

そしてJSはこちらです。

$(window).on("load resize",function(){

    var wH01 = $(window).height();
    //ウィンドウの高さを取得

	$('.slides img').css('height',wH01+'px');
	//上記をスライダーの画像の高さに設定

	$('.slides img').css('width','auto');
	//スライダーの画像の幅は高さに従う

	var imgwidth = $('.slides img').width() / 2;
	$('#maininner').css('margin-left','-'+imgwidth+'px');
	//幅を超えた場合のための画像センター寄せ

});

$(function() {

// slider
$(window).load(function() {
	$('.flexslider').flexslider({
		animation: "fade",
		directionNav: false,
		animationLoop: true,
		pauseOnAction: false,
		start: function(){
			//コールバックが利用できる場合はスライダー開始時にも設定
			var wH01 = $(window).height();
			$('.slides img').css('height',wH01+'px');
			$('.slides img').css('width','auto');
			var imgwidth = $('.slides img').width() / 2;
			$('#maininner').css('margin-left','-'+imgwidth+'px');
		}
	});
});

これができれば、動かしたい部分はもともとのスライダープラグインを活かせるし、背景ではないので色々有用なのかなーと思います。