2016-05-17 21 views
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; 


} 
+0

あなたは「IMG {幅:100%;}」与えている画像は、お使いのcontaiよりも小さい場合原因いいえ、それは彼のサイズの領域だけをカバーします。 https://jsfiddle.net/svztmyve/ - この例を残してください。 –

答えて

0

あなたが埋めるためにしようとしている画像はどれ?

彼らはalt="Evan&MEKiss"を持つものであるなら、あなたは、アルベルト・ルビオの答えを試すことができます。

.item img { 
    width: 100%; 
} 

あなたは背景画像を埋めるためにしようとしている場合は、URLを使用する背景画像を微調整してみてください:

を ​​

は、ここでプレースホルダ画像とcodepen例です:http://codepen.io/fawyna/pen/VaOmqX

関連する問題