bootstrap旋轉木馬問題與高度和控制

Question

我正在面對一個問題，我的引導旋轉木馬，因爲它只要很長的形象，以及旋轉木馬控制旋轉木馬出現醜陋的地方。我製作了一個屏幕記錄，可以更容易地明確問題的外觀。

我想，如果你可以看它是它會解釋更多的什麼，我找 https://www.youtube.com/watch?v=_9C8elqAscg

.carousel{margin-top: 20px;}.carousel .item img{margin: 0 auto; /* Align slide image horizontally center */}.bs-example{margin: 20px;} 

<div class="bs-example"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel" role="listbox"> 
    <!-- Carousel indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
     <li data-target="#myCarousel" data-slide-to="4"></li> 
    </ol> 
    <!-- Wrapper for carousel items --> 
    <div class="carousel-inner" class="myrdbtns"> 
     <div class="item active"> 
      <asp:Image ID="image" runat="server" alt="First Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img1") %>'></asp:Image> 
     </div> 
     <div class="item"> 
      <asp:Image ID="imgslide2" runat="server" alt="Second Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img2") %>'></asp:Image> 
     </div> 
     <div class="item"> 
      <asp:Image ID="imgslide3" runat="server" alt="Third Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img3") %>'></asp:Image> 
     </div> 
     <div class="item"> 
      <asp:Image ID="imgslide4" runat="server" alt="fourth Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img4") %>'></asp:Image> 
     </div> 
     <div class="item"> 
      <asp:Image ID="imgslide5" runat="server" alt="fifth Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img5") %>'></asp:Image> 
     </div> 
    </div> 
    <!-- Carousel controls --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev" > 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
    </div> 
</div> 

Answer 1

因此，有幾個不同的方式，你可以去使圖像適合在旋轉木馬。首先，您可以將轉盤項目設置爲具有指定的高度。然後設置圖像的高度和寬度爲100％。這是一個問題，因爲圖像可能會偏斜，並且從您的視頻中可以看出，一個圖像比其他圖像高很多，所以如果走這條路線，這個圖像看起來可能很傻。以下是如何設置圖像高度的示例。

#myCarousel .item{ 
    height: 300px; 
} 
#myCarousel .item img{ 
    height: 100%; 
    width: 100%; 
} 

或者您可以設置每個項目有一個背景圖像，然後設置背景圖像覆蓋。這可能會切斷一些非常高的圖像，但至少圖像不會像素化。這是一個例子。

#myCarousel .item{ 
    height: 300px; 
    background-position: center !Important; 
    background-size: cover !Important; 
} 

然後每件商品的HTML看起來像這樣：

<div class="item" style="background: url('http://placehold.it/1080x720');"> 
    //your item content here 
</div> 

至於它們在轉盤絕對定位的，所以你可以通過設置左，右，上控制它們的旋轉木馬控制，並且像這樣每個控件的底部：

.carousel-control{ 
    top: 40px; 
    bottom: 20px; 
} 
.carousel-control.left{ 
    left: 20px; 
} 
.carousel-control.right{ 
    right: 20px; 
} 

我已經成立了，我覺得你的東西演示在這裏尋找JSFiddle Bootstrap Carousel

在此演示中，我將.item設置爲具有百分比的填充底部。這會使轉盤響應，但您可以將.item設置爲有一個高度。然後，我給每個項目中的<p>標籤指定了高度和線條高度，並將輪播控件設置爲顯示在其下方。如果您遇到文本太長的問題，可以將此<p>標籤設置爲具有較高的高度或使用文本溢出：elipsis或其他類似的內容。無論如何，這可能不是你正在尋找的東西，但它至少會讓你開始朝正確的方向發展。

希望它有幫助。