Crop Image Sides as Browser Width Decreases in Bootstrap Carousel - html

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

Answer 2

I've googled this topic for a long time, and I think this is the best and the most comprehensive solution.
For bootstrap 3 responsive images to be cropped, non-distorted and remain centered while keeping the same height across different width of browsers, use css background images like this:
bootstrap default carousel: just mark div with a custom class, in this case "carousel-01", and use background image in CSS for that class. Related settings below for the background image is important for the centered, cropped effect. Set fixed height (usually the height of the image) for the div, here I use div.item because there are usually carousel-01, carousel-02...
Important: the custom class shouldn't be marked to the div.carousel-caption, because there are some bootstrap default setting applying to it, which could stop the magic from happening.
HTML:
<div class="carousel-inner">
<div class="item active carousel-01">
<div class="carousel-caption">
<h3>Beautiful Slide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
</div>
</div>
</div>
CSS:
.item {
height: 720px;
}
.carousel-01 {
background: url('image/ca01.jpg') no-repeat center center;
background-size: cover;
}
making a banner from bootstrap: basically the same, but simpler. Add a custom class to div, in this case, "banner-content", and add CSS background image to it with similar settings like above.
HTML:
<div class="container-fluid">
<div class="row banner-content">
<div class="col-md-12">
<h2>DEMO TEXT</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
<button type="button" class="btn btn-default btn-lg">Contact Us</button>
</div>
</div>
</div>
CSS:
.banner-content {
background: url('../image/banner.jpg') no-repeat center center;
background-size: cover;
height: 530px;
}

Answer 3

When you say, "would like to stretch to 100% of the browser width" the images are relative to the current width of browser (viewport), so do you mean you want the images to be 100% of the initial browser width?
Also, what would the image width be when the browser width increases? Do they stay at original 100% width or increase?
I took a shot at what I think the expected behavior is. It requires jQuery to monitor the initial viewport width.
Working demo: http://bootply.com/91957#

Answer 4

I think what your looking for is the clip property http://www.w3schools.com/cssref/pr_pos_clip.asp then you can use media queries to clip the relevant sides in the css.
Hope this helps

Answer 5

A Small improvement to the Version of Lloyd Banks, with transform -50% instead of margin. That way you only have to change the width of .carousel-inner with media queries if you want to change the height on different view ports.
Works only with css3 compatible browsers though.
.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%;
transform: translate(-50%, 0);
}