Crop Image Sides as Browser Width Decreases in Bootstrap Carousel

Question

I have a carousel with background images similar to this site

I have images that I would like to stretch to 100% of the browser width. When the user shrinks the width of his or her browser, the image should be cropped on the right and left hand sides. The image should not be resized (where the height changes). I am using the standard Bootstrap carousel layout

End result should follow be something like this

The blue rectangle in the middle is the container whose width should always be maintained. Before this container's borders are reached, the background image (in dark green with the shoes) should have it's right and left sides cropped as the width of the browser decreases.

What's the best way to do this?

Answer 1

The following did the trick:

.carousel.slide{
    max-width: 1600px; //the largest you want the image to stretch
    min-width: 900px; //the "container" width 
    overflow: hidden;
}
.carousel-inner{
   width: 1600px;
   left: 50%;
   margin-left: -800px;
}

The key is the left: 50% and margin-left: -800px combo. The negative margin should be half of what the max width is(in this case, 1600px).