将 div 中的 img 垂直对齐，高度为 100%答案

【问题标题】：Vertical align img in div with 100% height将 div 中的 img 垂直对齐，高度为 100%
【发布时间】：2012-04-21 00:45:45
【问题描述】：

我正在尝试找到一种解决方案，如何在具有 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/

非常感谢！

【问题讨论】：

嗨。我在这里回答：stackoverflow.com/questions/9915971/…

标签： css image dynamic vertical-alignment

【解决方案1】：

试试这个：

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

更新了你的小提琴：

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

【讨论】：

+1。但我不知道图像高度。现在有什么想法吗？我不想在这里使用 JavaScript。

【解决方案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');
}

【讨论】：