更改引導程序傳送帶的高度 - 保持其響應速度

我已經實現了引導程序傳送帶而不覆蓋任何樣式。我希望它能夠按照現在的方式做出反應，因此旋轉木馬和圖像一起響應而不會裁剪或扭曲圖像 - 但我希望旋轉木馬的起始高度更短。更改引導程序傳送帶的高度 - 保持其響應速度

它響應就像一個在此頁上：在當瀏覽器是全寬的那一刻 http://www.suug.co.uk/

因此，它是650像素高，我可以看到一個高度屬性尚未確定，所以我想知道如果我可以保持它的響應方式，但改變起始高度來說，550px。

我的代碼：

<div class="row"> 
    <div class="carousel slide" id="bannerFrontPage"> 

     <div class="carousel-inner"> 
      <div class="item"><a href=""><img src=""></a></div> 
      <div class="item"><a href=""><img src=""></a></div> 
      <div class="item"><a href=""><img src=""></a></div> 
     </div> 


     <a class="left carousel-control" data-slide="prev" href="#bannerFrontPage"><span class="sr-only">Previous</span></a> 
     <a class="right carousel-control" data-slide="next" href="#bannerFrontPage"> <span class="sr-only">Next</span></a> 
    </div> 
</div>

來源

2016-08-01 user3005003

這裏是一個的jsfiddle，可以幫助你：http://jsfiddle.net/gh4Lur4b/140/

您可以更改轉盤的高度在類的.carousel-inner，但是HTML結構是一個有點不同從你的，你可以調整它以適應你的要求。

.carousel-inner{ 
    height: 550px; 
}

由於只有調節轉盤的高度可能會導致您的圖片被壓扁，所以我挺推薦來定製你的旋轉木馬使用媒體查詢（按引導的文檔）的響應：

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { ... }

希望答案能幫助你！

來源

2016-08-01 10:29:01

你只需要添加下面一行在你的CSS

.bx-wrapper img{height: 550px; background-position: center; background-size: cover;}

希望它的工作:)

來源

2016-08-01 10:35:01

更改引導程序傳送帶的高度 - 保持其響應速度

回答

相關問題