Question

我正试图将图像垂直居中在div中。我在stackoverflow上看到了其他一些类似的问题，并决定使用这个解决方案：

<div id="wrapper">
    <div id="cell">
        <img />
    </div>
</div>

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

这适用于小于视口大小的图像。图像高度大于视口时出现问题。在这种情况下，包装器div只是成为图像的高度。它溢出了页面。我该如何避免这种情况。

此包装器div是view-port div的一部分。视口div具有固定高度，100％宽度位于绝对位置

#view-port{ height: 600px; width:100% }

编辑：我认为我对这个问题引起了一些困惑。我创建了JSfiddle来解释我的意思

这是一个链接：http://jsfiddle.net/sublime/fgTtj/

我希望将图像垂直居中于#outer我没有图像尺寸，正如你可以在小提琴上看到的那样，它工作得很好，但是当#outer divs height低于图像高度时，说200它会切割图像。我想缩小该图像以适应外部div

Answer 1

display:table有什么意义？您可以将其留空（或使用display:inline-block），然后添加overflow属性。

#wrapper{
  overflow:hidden;
  }

如果您希望能够滚动以查看图像的其余部分：

 #wrapper{
  overflow:scroll;
   }

Answer 2

此答案已被截断和编辑，以满足OP的需求。

使用jQuery，这是我的建议。您可以摆脱几个div，只需使用包装器和图像。上面代码的问题在于你给外部div设置了300px的高度。这意味着它不会缩小比这更小。我写了一个小脚本来说明窗口大小

http://jsfiddle.net/fgTtj/40/

我已经设置了你的HTML：

<div class="wrapper">
    <img src='http://s13.postimg.org/b7hmfvhyv/css.jpg'></img>
</div>

像这样的CSS：

.wrapper {
    position:relative;
    width:100%;
    height:300px;
    background-color:blue;
    overflow:hidden;
}

.wrapper img{
    position:absolute;
    max-width:100%;
    max-height:100%;
}

并且新的jQuery看起来像这样：

function center(){
    var imgW = $('img').width();
    var imgH = $('img').height();
    var half_imgW = imgW / 2;
    var half_imgH = imgH / 2;
    $('img').css({
        left: "50%",
        top: "50%",
        margin: "-" + half_imgH + "px 0 0 -" + half_imgW + "px"
    });
}

$(document).ready(function(){
    var wrapper_Height = $('.wrapper').height();
    center();
    $(window).resize(function(){
        console.log(wrapper_Height);
        var winH = $(this).height();
        var wrapH = $('.wrapper').height();
        if(winH <= wrapH){
            $('.wrapper').height(winH);    
        } else {
            if(wrapH <= wrapper_Height){
                $('.wrapper').height(winH); 
            }
        }
        center();
    });    
});

您可以在任何方向调整此窗口的大小，图像将保持居中而不会被切断。这仅适用于一个窗口，因此您必须调整脚本以适应更多。

令人敬畏的是，它几乎可以在每个浏览器中运行，其中display:table-cell在IE6等旧浏览器中不起作用，我认为IE7。

Answer 3

如果您不希望图像扩展视口高度，请设置max-height：

#cell img { max-height: 600px; }

使用显示表属性垂直居中div中的图像

3 个答案: