ブートストラップコルサールを反応させる方法

Question

高さは反応しますが、幅は反応しません（つまり）私はウィンドウのサイズを変更するとイメージがトリミングされます。以下は、それは左部分に携帯電話の画面サイズにcorousal作物に到達したビューポートには、感謝

 <header id="myCarousel" class="carousel slide"> 
     <!-- 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> 
     </ol> 

     <!-- Wrapper for Slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <!-- Set the first background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('images/corousal1.jpg');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 2</h2> 
       </div> 

      </div> 
      <div class="item"> 
       <!-- Set the second background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('images/corousal2.jpg');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 2</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the third background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('images/corousal1jpg.jpg');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 3</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the third background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('images/corousal4.jpg');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 3</h2> 
       </div> 
      </div> 
     </div> 

     <!-- Controls --> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 

     <div class="drbatras-logo"> 
      <img src="images/logo.png" alt="logo"/> 
     </div>  
    </header> 

CSS

、誰もがイメージの幅が応答するために鍬を助けることができる、ブートストラップおよびCSSコードです

html, 
    body { 
     height: 100%; 
    } 

    .carousel, 
    .item, 
    .active { 
     height: 100%; 
     position: relative; 
    } 

    .carousel-inner { 
     height: 100%; 
    } 
    /* Background images are set within the HTML using inline CSS, not here */ 

    .drbatras-logo{ 
     position: absolute; 
     top:60px; 
     right: 170px; 
    } 

    .fill { 
     width: 100%; 
     height: 100%; 
     background-position: center; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     background-size: cover; 
     -o-background-size: cover; 
    } 

Answer 1

あなたはこの

<div class="fill" id="fill"> </div> 

CSSを使用することができます<img>タグを使用してclass="img-responsive"

<img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460" height="345"> 

Answer 2

を設定することができます

#fill{ 
    background:url('images/corousal1.jpg') no-repeat center center; 
    background-size:100% auto; 
}