Question

本周末我一直在殴打自己，以解决这个问题。我有一个使用Bootstrap 3.0和带有背景图像的Carousel的网站，我设法用一个小小提琴重现我的问题。我有一个最大高度的div，里面有一个图像。图像通常大于div（至少在高度上）。我正在使用bootstrap中的img-responsive类来确保在移动浏览器中图像缩小。这就是为什么我对div进行最大高度并且不在其上设置固定高度的原因。

我的问题是：如何让图像垂直对齐到中间？我试过了：

添加类display: table和display: table-cell，但表格单元格不能具有最大高度。
垂直对齐但似乎没有效果。
使用javascript在图像上设置负边距，但这会使div更小，div也会使用图像来调整自身大小。
使用css背景而不是内嵌图像。这不会使div（最多）与图像一样大，并且不允许响应性增长/收缩。

小提琴：http://jsfiddle.net/SabbeRubbish/dZQ26/4/

<div class="carousel-inner">
  <div id="frame" class="item active">
    <img src="https://www.google.com/images/srpr/logo11w.png" 
         class="img-responsive" />
  </div>
</div>

任何人都可以向我推荐良好而干净的方法让图像垂直居中吗？或者告诉我，我到底做错了什么？ :-) 感谢。

PS：为什么垂直居中？如果页面非常宽，则随着图像随页面增长，会有一个大的剪辑区域。显示图片的中间而不是顶部更好。

Answer 1

这是否接近你想要实现的目标？

#frame {
    border: 1px solid grey;
    max-height: 100px;
    min-height: 100px; /* Remove this line */
    padding: 15px 0px; /* Add this line to always have height on the div */
    background-size: cover;
    background-image: url(https://www.google.com/images/srpr/logo11w.png);
    background-position: center center;
}

http://jsfiddle.net/rrEYJ/

修改

根据评论中的建议，您还可以使用background-size: contain;将整个图像放在#frame元素中。在这种情况下，您可能还必须使用background-repeat: no-repeat;。

检查这个小提琴：http://jsfiddle.net/rrEYJ/1/

<强> EDIT2：

根据您的评论，我做了一些研究，显然背景大小的属性也可以按百分比设置。基于这些新信息，请看这个小提琴：

http://jsfiddle.net/rrEYJ/3/

<强> EDIT3：

css有一个min-height属性，这就是为什么div没有改变它的高度。检查这个小提琴：http://jsfiddle.net/rrEYJ/4/

我希望这会有所帮助。

Answer 2

为此类图像添加样式

#frame img {
width:auto;
max-height:100px; }

Bootstrap轮播 - 如何使用图像作为比旋转木马更大的背景？

2 个答案: