css - 高さ 100% の div で img を垂直方向に揃える

Question

div 内の画像を 100% の高さで垂直方向に揃える方法を見つけようとしています (高さはわかりません)。

私はこのHTMLを持っています。ラッパーを追加する以外に、HTML でできることはあまりありません。

<div id="wrapper">
    <img src="http://www.lovecpokladu.cz/nalezy/9687/5.jpg" alt="" />
</div>​

そして、この非常に修正された CSS - すべてのブラウザで、画像がブラウザのウィンドウをオーバーフローしないようにする必要があります。

#wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ddd;        
}
img {
  max-width: 100%;
  max-height: 100%;
}

http://jsfiddle.net/2nkvm/

どうもありがとう！

Answer 1

これを試して：

img { 
     display:block; 
     position:absolute; 
     top:50%; 
     margin-top:"negative margin based on half of image height"; 
}

あなたのフィドルを更新しました：

http://jsfiddle.net/2nkvm/3/

Answer 2

$(document).ready( function() {
    positionImage();
    $(window).resize( function() {
        positionImage();
    });
});
function positionImage() {
    var wrapperHeightOffset = $('#wrapper').height() - $('#wrapper img').height();
    var wrapperHeightOffset = wrapperHeightOffset/2;
    $('#wrapper').css('paddingTop', wrapperHeightOffset + 'px');
}