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

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

  

    

      
Slide1 headline.
      
Slide content.
    
  
 

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.