1
私の画像のスライダは、私が望むやり方ではありません。画像はコンテナの幅いっぱいになりません
ブラウザウィンドウが小さい場合を除き、イメージはコンテナの幅いっぱいになりません。私のウィンドウが大きくなると、イメージの右側には、イメージ全体の幅よりもむしろ空白があります。ここで
は私のコードです:
<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;
}
あなたは「IMG {幅:100%;}」与えている画像は、お使いのcontaiよりも小さい場合原因いいえ、それは彼のサイズの領域だけをカバーします。 https://jsfiddle.net/svztmyve/ - この例を残してください。 –