jquery - imgタグを絶対に中央に保ち、比率を維持する

Question

問題は次のとおりです。

コンテンツが中央に配置された、ページの全幅のスライダーがあります。以下は、理解するための簡単な HTML モックアップです。

<div class="slider">
    <div class="slide">
         <img src="01.jpg">
         <div class="wrapper">
              <h1>01</h1>
         </div>
    </div>
    <div class="slide">
         <img src="02.jpg">
         <div class="wrapper">
              <h1>02</h1>
         </div>
    </div>
    <div class="slide">
         <img src="03.jpg">
         <div class="wrapper">
              <h1>03</h1>
         </div>
    </div>
</div>

そのため、img タグをスライダー div の中央に配置したいのですが、完全に埋めてください。background-image を使用すればこれを実行できることはわかっていますが、ここでは各スライドの背景画像を変更する必要があるため、img タグを使用しようとしています。

これまでの私のcssは次のとおりです。

.slider {
    height:370px;
    width:100%;
    float:left;
    text-align: center;
    background-color: grey;
    position:relative;
    text-align: center
}

.slide img {
    height:370px;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

.slide .wrapper {
    position:absolute;
    top:0;
    left:0;
    z-index:2;
}

このソリューションでは、ウィンドウのサイズ変更時に画像のサイズが変更されます。中央に固定したままにして、画面サイズに応じて必要に応じてさらに表示する必要があります(したがって、私の画像は1920 * 370pxです)

ここでは、画像のサイズ変更の問題を簡単にいじります: http://jsfiddle.net/4wZkN/

助けてくれてありがとう。