How to extend Twitter Bootstrap image carousel for dynamically sized, centered images

Question

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.)

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/

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.)

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.

Any hints would be greatly appreciated - been banging my head on this one for quite some time.

Answer 1

You can center horizontally with these rules:

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

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

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.

Answer 2

Use the CSS background property directly on the div containing the carousel item:

In the *.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>

In the *.css:

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

However, this seems to break the carousel navigation arrows.

Answer 3

try to use this snippet

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