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

Answer 1

try to use this snippet

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

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

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.