Bootstrap carousel - 如何使用比 carousel 大的图像作为背景？

Question

这个周末我一直在打败自己来解决这个问题。 我有一个使用 Bootstrap 3.0 和带有背景图像的 Carousel 的站点，并且我设法在一个小小提琴中重现了我的问题。 我有一个最大高度的 div，里面有一个图像。图像通常比 div 大（至少在高度上）。我正在使用引导程序中的img-responsive 类来确保在移动浏览器中图像按比例缩小。这就是为什么我将 div 设置为 max-height 而没有在其上放置固定高度的原因。

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

• 添加类 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/

编辑：

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

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

EDIT2：

根据您的评论，我做了一些研究，显然 background-size 属性也可以设置为百分比。根据这些新信息，请参阅此小提琴：

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

EDIT3：

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

我希望这会有所帮助。

Answer 2

为这样的图像添加样式

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