Изменить высоту карусели Bootstrap

#javascript #html #css #bootstrap #карусель

Скажите пожалуйста, как изменить высоту карусели Bootstrap? Чтобы весь контент сохранялся,
а в идеале и пропорции изображения.
    

Ответы

Ответ 1

Растянуть изображения на всю ширину страницы

.carousel-inner img {
  height: auto;
  width: 100%;
}




@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel-inner img {
  height: auto;
  width: 100%;
}

  
  

    

    

    

  

  
  

    

      
      

        
Первый слайд
      
    
    

      
      

        
Второй слайд
      
    
    

      
      

        
Третий слайд
      
    
  

  
  
    
    Previous
  
  
    
    Next
  









Задать карусели определённую высоту

Высота .carousel-inner img задаёт высоту изображений, а высота .carousel - высоту
всей карусели. 

Изображение сидят внутри карусели как в матрёшке. Карусель может быть больше своих
изображений, но если увеличить изображения, они растянут и карусель. А если уменьшить
карусель, она сожмёт изображения внутри себя.

От высоты карусели зависит размер боковых панелей, на которые нажимают, чтобы перейти
к соседнему слайду.

И индикаторы по умолчанию стоят у нижней границы карусели. Если карусель выше изображений,
то индикаторы выходят за пределы изображений и встают под ними. Такие индикаторы нужно
перекрасить с учётом фона страницы.

.carousel {
  height: 500px !important;
}
.carousel-inner img {
  height: 400px !important;
  margin: 0 auto;
}
.carousel-indicators li {
  border-color: #000;
}
.carousel-indicators .active {
  background-color: #000;
}




@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel {
  height: 500px !important;
}
.carousel-inner img {
  height: 400px !important;
  margin: 0 auto;
}
.carousel-indicators li {
  border-color: #000;
}
.carousel-indicators .active {
  background-color: #000;
}

  
  

    

    

    

  

  
  

    

      
      

        
Первый слайд
      
    
    

      
      

        
Второй слайд
      
    
    

      
      

        
Третий слайд
      
    
  

  
  
    
    Previous
  
  
    
    Next
  









То и другое одновременно

Отменяем ограничение на max-width и используем min-width: 100%; вместо width: 100%;,
чтобы слишком широкие изображения выходили за края экрана и сохраняли свои пропорции.

Чтобы отцентрировать изображения, края которых выходят за границы экрана, нуженposition:
absolute; left: 50%; transform: translateХ(-50%); вместо margin: 0 auto;.

Точно так же позволяем изображениям выходить за верхний и нижний края карусели. Задаём
им минимальную высоту и центрируем их по вертикали.

https://jsfiddle.net/glebkema/601g6n69/



@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel {
  height: 400px !important;
  overflow: hidden;
}
.carousel-inner {
  overflow: visible;
}
.carousel-inner img {
  left: 50%;
  max-width: none !important;
  min-height: 400px;
  min-width: 100%;
  position: absolute;
  top: 200px;
  transform: translate(-50%,-50%);
}

  
  

    

    

    

  

  
  

    

      
      

        
Первый слайд
      
    
    

      
      

        
Второй слайд
      
    
    

      
      

        
Третий слайд
      
    
  

  
  
    
    Previous
  
  
    
    Next