圖像將不會填充容器的完整寬度

除非我的瀏覽器窗口很小，否則圖像將不會填充容器的整個寬度。當我的窗口較大時，圖像的右側有一個空白區域，而不是圖像填滿整個寬度。

這裏是我的代碼：

<div class="bs-example"> 
    <div id="myCarousel" class="carousel slide" data-interval="6500" data-ride="carousel"> 
     <!-- Carousel 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> 
<div class="fill"> 
     <div class="carousel-inner"> 

      <div class="active item carousel-fade"> 

       <img src="EvanHeathYellowGreen.jpg" alt="Evan&MEKiss" > 

      </div> 
      <div class="item carousel-fade"> 
       <img src="EvanCrossStreet.jpg" alt="Evan&MEKiss" > 

      </div> 

      <div class="item carousel-fade"> 

       <img src="EvanMeLook.jpg" alt="Evan&MEKiss" > 


      </div> 
     </div> 
    </div> 
     <!-- Carousel nav --> 
     <a class="carousel-control left" href="#myCarousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
    </div> 
</div>

和CSS：

.fill { 
    overflow: hidden; 
    background-size: cover; 
    background-position: center; 
    background-image:"path/to/image.jpg"; 
} 



.carousel-inner{ 

margin-left: auto; 

} 

.carousel{ 
    margin-top: 20px; 
    border-top: 2px solid black; 
    border-bottom: 2px solid black; 


}

來源

2016-05-17 Heath Patrick Renfrow

你給「IMG {寬度：100％;}」原因如果圖像大於包含3小那麼，它將只覆蓋他的大小區域。 https://jsfiddle.net/svztmyve/ - 給你這個例子。 –