ブートストラップカルーセルの高さの変更 - 応答性の維持

Question

私は、スタイルを無効にせずにブートストラップカルーセルを実装しました。私はそれが現時点でのやり方に対応したいので、カルーセルとイメージは、イメージが切り取られたり歪んだりすることなく一緒に応答します。しかし、私はカルーセルの開始高さをより短くしたいと思います。

それは、このページ上のいずれかのように応答：ブラウザは全幅があり、現時点でそう http://www.suug.co.uk/

ことである650px高、私はheight属性が設定されていないので、私は疑問に思って見ることができます私はそれが応答する方法を維持することができますが、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> 

Answer 1

はあなたを助けるかもしれない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) { ... } 

答えがあなたを助けることを願っています！

Answer 2

あなただけ

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

はその作業を願っています:)

あなたのCSSの行の下に追加する必要があります