在div中垂直对齐img,高度为100%

时间:2012-04-20 16:35:12

标签: css image dynamic vertical-alignment

我正在尝试找到一个解决方案,如何在高度为100%的div中垂直对齐图像(我不知道它的高度)。

我有这个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/

非常感谢!

2 个答案:

答案 0 :(得分:1)

试试这个:

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

更新了你的小提琴:

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

答案 1 :(得分:-1)

$(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');
}