Question

我正在尝试找到一个解决方案，如何在高度为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/

非常感谢！

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

在div中垂直对齐img，高度为100％

2 个答案: