Bootstrap carousel height

Question

Я пытаюсь создать карусель на своем веб-сайте, но мои изображения не имеют одинаковой высоты. Я искал в Интернете, и я был удивлен, что никто не использовал класс «img-responsive», который на самом деле не работает, или я не использую его правильно ...

Так что мой вопрос: почему класс «img-responsive» не работает должным образом? (P.S. я попытался исправить максимальную высоту внутреннего карусели, но изображение не изменилось правильно)

Вот мой код, может ли кто-нибудь мне помочь?

<div class="row"> 
    <div id="Carousel" class="carousel slide col-lg-12" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#Carousel" data-slide-to="0" class="active"></li> 
      <li data-target="#Carousel" data-slide-to="1"></li> 
      <li data-target="#Carousel" data-slide-to="2"></li> 
      <li data-target="#Carousel" data-slide-to="3"></li> 
     </ol> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner col-lg-12" role="listbox"> 
      <div class="item active"> 
       <img class="img-responsive" src="Images/Articles/Suisei_no_gargantia.jpg" alt="Suisei_no_gargantia"> 
       <div class="carousel-caption"> 
        <h4>Header</h4> 
        <p>Sample text</p> 
       </div> 
      </div> 

      <div class="item"> 
       <img class="img-responsive" src="Images/Articles/Pokemon.jpg" alt="Pokemon"> 
      </div> 

      <div class="item"> 
       <img class="img-responsive" src="Images/Articles/Nisekoi.jpeg" alt="Nisekoi"> 
      </div> 

      <div class="item"> 
       <img class="img-responsive" src="Images/Articles/High_School_Of_The_Dead.jpg" alt="High_School_Of_The_Dead"> 
      </div> 
     </div> 

    <!-- Left and right controls --> 
     <a class="left carousel-control" href="#Carousel" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#Carousel" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
</div> 

Answer 1

Я искал ответ сам когда-то и не нашел ничего важного. Как-то я получаю CSS, который может решить проблему.

//Add following class in tag <div id="Carousel" class="carousel slide col-lg-12" data-ride="carousel"> 

.video-container{ 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 10px; height: 0; overflow:hidden; 
} 

.video-container div, 
.video-container img, 
.video-container iframe, 
.video-container object, 
.video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

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

Answer 2

У меня была такая же проблема, а также нашел, что класс, отвечающий требованиям img, бесполезен, поскольку карусель Bootstrap не имеет фиксированной высоты.

Предложите удалить класс img-responsive.

я определил точные высоты для item DIV с запросами СМИ и добавил следующий CSS к img тега, например так:

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 
#Carousel .carousel-inner .item { 
    height:200px; 
} 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) { 
#Carousel .carousel-inner .item { 
    height:300px; 
} 
} 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { 
#Carousel .carousel-inner .item { 
    height:400px; 
} 
} 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { 
#Carousel .carousel-inner .item { 
    height:500px; 
} 
} 

#Carousel .carousel-inner .item img { 
max-height: 100%; 
max-width: 100%; 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
margin: auto; 
}