如何扩展Twitter Bootstrap图像轮播为动态大小，居中的图像 [英] How to extend Twitter Bootstrap image carousel for dynamically sized, centered images
问题描述
我尝试扩展默认的Bootstrap图片轮播，以支持动态大小的图片（最大500x400），以水平和垂直为中心。此外，我想保留原始的字幕布局，将标题固定在图片底部，标题div完全穿过图片（但不能进一步扩展）。
I'm trying to extend the default Bootstrap image carousel to support dynamically sized images (500x400 max), centered both horizontally and vertically. Additionally, I'd like to maintain the original caption layout, which anchors the caption to the bottom of the image, with the caption div extending fully across the image (but no further.)
我把一个小提琴放在一起，这是一个相当干净的实现默认的Bootstrap设置（在css部分的结尾只有4个额外的样式）：
I've put together a fiddle, which is a fairly clean implementation of the default Bootstrap setup (there are only 4 additional styles at the end of the css section):
http://jsfiddle.net/rdugan/JFBFU/26/
我可以很容易地通过在图像和标题周围添加一个围绕的inlinediv，并在父级上使用text-align：center来完成水平居中和字幕要求。但是，垂直居中仍然是一个问题（一如既往）。
I can fairly easily accomplish the horizontal centering and caption requirements by adding a surrounding 'inline' div around the image and caption, and using 'text-align: center' on the parent. However, the vertical centering remains a problem (as always.)
另外，我也尝试使用'display：table-cell'样式）在不同的div上有不同的结果 - 在某些情况下，我搞砸了旋转木马的功能，而在其他我完成图像中心，但失去说明锚定。
As an alternative, I've also tried using 'display: table-cell' (and the accompanying centering styles) on different divs with varying results - in some cases I mess up the carousel functionality, while in others I accomplish the image centering, but lose the caption anchoring.
任何
推荐答案
您可以使用这些规则水平居中：
You can center horizontally with these rules:
.carousel-inner {text-align：center; }
.carousel-inner { text-align: center; }
.carousel .item> img {display：inline-block; }
.carousel .item > img { display: inline-block; }
对于垂直对齐，您应该查看：
http://www.student.oulu.fi/~laurirai/www/css/middle/
For vertical aligning you should check out this: http://www.student.oulu.fi/~laurirai/www/css/middle/
为了保持图像的纵横比在调整大小你只需要改变的宽度或只有图像的高度，不是一次一个，它将调整其原始比例的大小。
And for keeping the image aspect ratio on resizing you just have to change only the width or only the height of the image not both at a time and it will resize with its original ratio.
这篇关于如何扩展Twitter Bootstrap图像轮播为动态大小，居中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
