-2

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

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

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

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

这个包装器 div 是视口 div 的一部分。视口 div 具有固定高度和 100% 宽度定位绝对 

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

编辑：我想我对这个问题造成了一些混乱。我创建了 JSfiddle 来解释我的意思

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

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

4

3 回答 3

0

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

#wrapper{
  overflow:hidden;
  }

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

 #wrapper{
  overflow:scroll;
   }
于 2013-04-16T23:53:49.140 回答
0

此答案已被截断和编辑以满足 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 等旧浏览器中不起作用。

于 2013-04-17T00:01:01.547 回答
0

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

#cell img { max-height: 600px; }
于 2013-04-17T00:17:51.353 回答