流体イメージ、幅の流体内で垂直に整列（中央）DIV

Question

div内の画像を垂直方向に整列させるもう一つの質問ですが、私は私がここで見つけたものとは異なると思います。自分の状況に適した解決策を見つけることができないようです。

私は100％幅のDIVを持っています（左に浮いており、ピクセル幅が設定されているコンテナです）。ピクセルの高さが設定されています。私はDIV内のコンテンツのバックグラウンドに到達するために絶対的なポジショニングをしているというイメージを持っています。画像は幅100％の液体です。

すべてがうまくいきますが、画像を縦に並べて高さがわかりません。ここで

は私がやろうとしているかを示していくつかのサンプルコードです：

<div class="container"> 
    <div class="image-wrapper"> 
    <img src="http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg" 
     width="100%" /> 
    </div> 
    <p>Some text</p> 
</div> 

そして、いくつかのサンプルCSS：

.container { 
    width:100%; 
    margin-top:10px; 

    height:100px; 
    overflow:hidden; 
} 

.image-wrapper { 
    position: relative; 
} 
.image-wrapper > img { 
    position: absolute; 
    z-index: -1; 
} 
p { 
    text-align: center; 
    padding-top: 10px; 
    color:#fff; 
    font-weight: bold; 
} 

しかし、花は内に見える、それの中心と表示されるはずですコンテナdiv。

どのような考えですか？私はJavascriptのサイジングを避けようとしています（このサンプルには表示されていない外側のコンテナはすでにサイズ変更されています）。私はより多くのDIV、テーブルに反対していません。

A jsFiddleはこのデモする：背景画像のプロパティに行かないのはなぜ http://jsfiddle.net/JonMcL/sNz9h/

Answer 1

を？それは私はあなたが私はCSSで背景画像を設定することをお勧めし必要なものを取得した場合、その後、あなたは正しく位置などを設定することができ

http://jsfiddle.net/urrWS/

Answer 2

...垂直センタリングを可能に

.container { 
width:100%; 
margin-top:10px; 
background-image:url("http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg"); 
background-repeat:no-repeat; 
background-position:left center; 
height:100px; 
overflow:hidden; 

}

あなただけbeyonそれを伸ばすダウンイメージをスケーリングしていないしたいと仮定すると、

http://jsfiddle.net/sNz9h/6/

Answer 3

これは本来の解決策です。少しjQueryが関わっていますが、最小限です。基本的に、これはwindow.resizeイベントでIMGの上部マージンを調整します。

HTML

<div id="container"> 
    <img id="image" src="image.jpg"> <!-- native size is 480x300 --> 
</div> 

CSS

#container { 
    margin: auto; 
    width: 80%; 
    height: 300px; 
    border: 1px solid gray; 
} 

#image { 
    display: block; 
    width: 100%; 
    max-width: 480px; 
    margin: auto; 
} 

jQueryの

function adjustImage() { 
    $("#image").css('margin-top', ($("#container").height() - $("#image").height())/2); 
} 

$(window).load(function() { 
    adjustImage(); 

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