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

您要填写的图片是哪个？

如果他们是alt="Evan&MEKiss"，那么你可以试试Alberto Rubio的答案：

.item img {
    width: 100%;
}

如果您要填充背景图片，可以尝试调整背景图片以使用网址：

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

以下是带有占位符图片的codepen示例：HTTP POST parameters

图像不会填充容器的整个宽度

1 个答案: