Bootstrap传送带高度

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-responsive类没有帮助，因为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; 
}