Bootstrap傳送帶高度

我試圖在我的網站上建立一個傳送帶，但我的圖像沒有相同的高度。我在網上搜索，我很驚訝沒有人使用「img-responsive」類，這實際上不起作用，或者我沒有正確地使用它...Bootstrap傳送帶高度

所以我的問題是;爲什麼「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>

來源

2015-01-15 Axel Samyn

我前段時間搜索了自己的答案，發現沒有什麼重要的。不知何故，我得到一些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%; 
}

它爲我工作得到相同的高度和響應性的圖像。

來源

2015-01-15 11:57:29 TahirRauf

我找到了解決辦法由muself將其加入此CSS'.carousel-內.item img { \t height：300px; \t margin：auto; } '但我只是想知道如果他們是爲什麼bootstrap img-responsive類不能正常工作的原因 –

我有同樣的問題，並且還發現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; 
}

來源

2015-12-29 04:16:06

Bootstrap傳送帶高度

回答

相關問題