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 wid

Answer 1

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 2

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 3

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:

1. 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;
   }
   

2. 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 4

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);
    }

Answer 5

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