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

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

In the *.html:

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.