Bootstrap - Carouselで画像の縮尺を最大にする方法は？

Question

私は、ブートストラップ・カルーセル・コントロールの画面全体を埋めるべき画像を表示しようとしています。私は1024px * 795pxの画像を使用しています

私はフルサイズの画像でブートストラップサイトで与えられた例を使用しています。水平になると、画面がいっぱいになってしまいます。しかし、垂直にはうまく拡張できません。どのようなプロパティを追加/削除すれば、画像は画面サイズ全体を満たしますが、ピクセルサイズは小さくなりますか？

どのようにレスポンシブルデザインでも行うことができるので、画像のサイズはどのように変わるのですか？

私はcssをcarousel.htmlのサンプルサイトとCSSだけで使用しています。

Answer 1

私はこの回答が少し遅れたことを認識していますが、私もBootstrapカルーセルで同様の問題に直面しました。 100％高さを稼働させるためには、回転コンベアとその親コン​​テナの高さを100％にする必要があります。

私は、ブートストラップCSSクラスにいくつかのオーバーライドを追加しました：その後、

html,body{height:100%;} 
.carousel,.item,.active{height:100%;} 
.carousel-inner{height:100%;} 
.fill{width:100%;height:100%;background-position:center;background-size:cover;} 

そして、あなたのカルーセルに応じてクラスを "埋める" を追加します。http://bootply.com/59900

：ここ

<div class="container fill"> 
<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="active item"> 
     <div class="fill" style="background-image:url('//www.portalapp.com/images/greengrass.jpg');"> 
     <div class="container"> 
      <h1 class="pull-left pull-middle light-color"><strong><a href="#">Slide 1</a></strong></h1> 

     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <div class="fill" style="background-image:url('//placehold.it/1024x700');"> 
     <div class="container"> 
      <h1 class="pull-left pull-middle light-color"><strong><a href="#">Slide 2</a></strong></h1> 

     </div> 
     </div> 
    </div> 
    </div> 
    <div class="pull-center"> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 
    </div> 
</div> 
</div> 

は実施例であります