Как сделать bootstrap corousal отзывчивым

Question

Я делаю бутстрап с короной полной ширины и высоты, высота чувствительна, но ширина не реагирует (т.е.), когда я изменяю размер окна, изображение начинает обрезать в соответствии с шириной видовых, когда он достигает на мобильный размер экрана левую часть в corousal культуры, то ниже Bootstrap и код CSS, кто может помочь мотыгой, чтобы ширина изображения отзывчивым, спасибо

 <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

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

вы можете использовать <img> тег и установить class="img-responsive"

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

Answer 2

вы можете использовать этот

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

CSS

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