如何为动态调整大小、居中的图像扩展Twitter Bootstrap图像轮播

Question

我正在尝试扩展默认的Bootstrap图像轮播，以支持动态大小的图像(500x400最大)，水平和垂直居中。此外，我希望保持原始的标题布局，它将标题锚定到图像的底部，标题div完全扩展到整个图像(但不会进一步扩展)。

我已经组装了一个小提琴，它是默认Bootstrap设置的一个相当干净的实现(在css部分的末尾只有4个额外的样式)：

http://jsfiddle.net/rdugan/JFBFU/26/

我可以很容易地完成水平居中和标题的要求，通过在图片和标题周围添加一个环绕的'inline‘div，并在父级上使用'text-align: center’。然而，垂直居中仍然是一个问题(一如既往)。

作为另一种选择，我还尝试在不同的div上使用'display: table-cell‘(以及相应的居中样式)，结果各不相同--在某些情况下，我搞砸了carousel功能，而在其他情况下，我完成了图像居中，但丢失了标题锚定。

任何提示都会非常感谢--我已经在这个问题上苦苦思索了很长时间。

Answer 1

您可以使用以下规则水平居中：

文本.carousel-

{文本对齐:居中；}

.carousel .item > img {显示:行内块；}

对于垂直对齐，您应该查看以下内容：http://www.student.oulu.fi/~laurirai/www/css/middle/

Answer 2

直接在包含carousel项的div上使用CSS background属性：

在*.html中：

<div class="item" style="background-image: url('[path-to-image].png')">
    <!-- omit the <img> tag -->
    <!-- the rest of the stuff that was in the <div> goes here -->
</div>

在*.css中：

.carousel .item {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

然而，这似乎打破了旋转木马导航箭头。

Answer 3

尝试使用此代码段

.carousel-inner > .item > img {
    min-width: 100%;
}