Bootstrap carousel setting auto height

Question

Есть ли способ не устанавливать высоту для карусели бутстрапа и позволить ей автоматически определять высоту, исходя из того, что ширина изображения установлена ​​на уровне 100%? Я понимаю, что он будет подпрыгивать вверх и вниз между слайдами, что хорошо. В настоящее время для начальной загрузки HTML у меня есть:

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <div class="slider-image img-responsive " style="background-image: url(/folder/image.png); background-position: 50% 50%; background-size: cover;"></div> 
     </div> 
    </div> 
</div> 

С помощью CSS:

#carousel, .item, .slider-image { 
    height: auto; 
    width: 100%; 
} 

С этим я не могу видеть изображение на всех - он просто устанавливает высоту до 0. Любые идеи?

Answer 1

этот код работает для меня:

.carousel-inner { 
height:auto; 
} 
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    width: 100%; 
    margin: auto; 
    min-height:initial; 
} 

, если вы хотите, чтобы изменить размер изображения, вы можете добавить класс CSS для целевого изображения Good Luck

Answer 2

Вместо использования DIV и фона просто положить изображение в слайд с тега изображения и установить ширину изображения до 100%

HTML:

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="path/to/image.jpg"/> 
     </div> 
    </div> 
</div> 

CSS:

#carousel .item img{ 
    width:100%; 
}