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

Question

我正在尝试扩展默认的 Bootstrap 图像轮播以支持动态大小的图像(最大 500x400)，水平和垂直居中。此外，我想保持原来的标题布局，将标题固定在图像的底部，标题 div 完全延伸到整个图像(但不再延伸。)

我整理了一个 fiddle ，它是默认 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/

为了在调整大小时保持图像的纵横比，您只需更改图像的宽度或高度，而不是同时更改图像的宽度和高度，它会以其原始比例调整大小。