图像无法填充容器的整个宽度

Question

我的图像滑块不是我想要的方式。

除非我的浏览器窗口很小，否则图像不会填满容器的整个宽度。当我的窗口较大时，图像的右侧有一个空白，而不是图像填满整个宽度。

这是我的代码：

<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; 


}

Answer 1

这是你试图填补的形象？

如果他们是

.item img {
    width: 100%;
}

如果您正在尝试填充背景图像，您可以尝试调整背景图像以使用url：

background-image:url("path/to/image.jpg");

这是一个带有占位符图像的代码页示例：http://codepen.io/fawyna/pen/VaOmqX