如何扩展Twitter Bootstrap图像轮播以获得动态大小的居中图像

Question

我正在尝试扩展默认的Bootstrap图像轮播以支持动态大小的图像(最大500x400),水平和垂直居中.另外,我想保持原始的标题布局,将标题固定在图像的底部,标题div在图像上完全延伸(但没有更多.)

我把一个小提琴放在一起,这是一个相当干净的默认Bootstrap设置的实现(在css部分的末尾只有4个额外的样式):

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

通过在图像和标题周围添加周围的"内联"div,并在父级上使用"text-align:center",我可以相当轻松地完成水平居中和字幕要求.然而,垂直居中仍然是一个问题(一如既往).

作为替代方案,我也尝试在不同的div上使用'display:table-cell'(以及随附的居中样式),结果各不相同 - 在某些情况下,我搞乱了旋转木马的功能,而在其他情况下,我完成了图像居中,但失去了标题锚定.

任何提示都会非常感激 - 我已经在这个问题上敲了很长时间.

Answer 1

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

.carousel-inner {text-align:center; }

.carousel .item> img {display:inline-block; }

对于垂直对齐,你应该看看: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;
}

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