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

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 高度小于图像高度时，比如说 200 它会剪切图像。我想缩小该图像以适应外部 div

Answer 1

此答案已被截断和编辑以满足 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 2

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

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

Answer 3

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

#wrapper{
  overflow:hidden;
  }

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

 #wrapper{
  overflow:scroll;
   }