如何为动态大小的居中图像扩展 Twitter Bootstrap 图像轮播答案

【问题标题】：How to extend Twitter Bootstrap image carousel for dynamically sized, centered images如何为动态大小的居中图像扩展 Twitter Bootstrap 图像轮播
【发布时间】：2012-04-19 17:59:00
【问题描述】：

我正在尝试扩展默认的 Bootstrap 图像轮播以支持动态大小的图像（最大 500x400），水平和垂直居中。此外，我想保持原始的标题布局，它将标题锚定到图像的底部，标题 div 完全延伸到图像上（但没有进一步。）

我整理了一个小提琴，它是默认 Bootstrap 设置的一个相当干净的实现（在 css 部分的末尾只有 4 个额外的样式）：

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

通过在图像和标题周围添加一个环绕的“内联”div，并在父对象上使用“文本对齐：中心”，我可以相当轻松地完成水平居中和标题要求。但是，垂直居中仍然是一个问题（一如既往。）

作为替代方案，我还尝试在不同的 div 上使用 'display: table-cell'（以及随附的居中样式），结果各不相同 - 在某些情况下，我搞砸了轮播功能，而在其他情况下，我完成了图像居中，但失去标题锚定。

任何提示将不胜感激 - 很长一段时间以来一直在努力解决这个问题。

【问题讨论】：

标签： css html twitter-bootstrap carousel centering

【解决方案1】：

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

.carousel-inner { 文本对齐：居中； }

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

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

为了在调整大小时保持图像纵横比，您只需要更改图像的宽度或高度，而不是同时更改两者，它将按照原始比例调整大小。

【讨论】：

【解决方案2】：

直接在包含轮播项目的 div 上使用 CSS 背景属性：

在 *.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;
}

但是，这似乎破坏了轮播导航箭头。

【讨论】：

这对我来说可以很好地拉伸图像。在 Chrome、IE7、8、9 中测试，对结果感到满意。
在 CSS 中记得设置 .item 的高度，这样你的幻灯片就可以看到，修复导航箭头问题。

【解决方案3】：

尝试使用这个sn-p

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

【讨论】：