Make bootstrap carousel responsive on height

Question

I need to customize BS carousel, to make images size responsive corectly. I need the carousel to adapt to the height of the active slides images initiel height. When the viewpor

Answer 1

I was having the same problem as above. Here's my solution. I changed a few lines of CSS:

.carousel {
  margin-bottom: 60px;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  min-width: 100%;
  background-color: #fff;
}

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

I hope this helps.

Answer 2

To use images on Bootstrap carousel of different sizes and to do the followings, all at the same time,

1. Image's width on carousael = 100%
2. Carousel image slide height = fixed
3. Maintain the image ratio

Remove the img tag & add a new class instead, say slide1

<div class="item slide1">
  <div class="container">
    <div class="carousel-caption">
      <h1>Slide1 headline.</h1>
      <p>Slide content.</p>
    </div>
  </div>
</div> 

then add the following CSS code for slide1 class,

.slide1{
    height: 500px;  /* your desired height for this slide */
    background: url(/img/your-img.jpg) no-repeat center center;
    background-size: cover;
}

You may also configure this heights for different window sizes.

Answer 3

I will refer you just to add the class "img-responsive" in the image tags. And Bootstrap will do the rest for you.

This class tells the Bootstrap that you want to scale the images according to the screen size.

<div class="carousel slide" id="theCarousel" data-interval="3000">
        <ol class="carousel-indicators">
        <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#theCarousel" data-slide-to="1"></li>
        <li data-target="#theCarousel" data-slide-to="2"></li>
        </ol>

            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar%201.JPG" alt="1" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">Resting In Style</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
                <div class="item ">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar%202.JPG" alt="2" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">The Dude Look</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
                <div class="item ">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar.JPG" alt="3" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">How z It??</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
            </div> 
        </div>          

For more details Here I have an article regrading this, You can take a look if you want

Carousel Image Slider In Bootstrap 3

Answer 4

In the CSS selector .carousel-inner > .item > img, replace min-width with width: 100%;

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

Answer 5

I fixed it adding a class to the images in the carousel, for example :

<img class="fixed-height">

and in the css:

.fixed-height {
    max-height: 400px;
}

Answer 6

define for every devices such as

@media (min-width: 360px) {
  .carousel {
    min-height: 140px;
   margin-bottom: 60px;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    z-index: 10;
    }

   /* Declare heights because of positioning of img element */
   .carousel .item {
    min-height: 140px;
    background-color: #777;
    }
   .carousel-inner > .item > img {
    position: absolute;
   top: 0;
   left: 0;
   min-width: 100%;
   min-height: 140px;
  }


}