カルーセル（ブートストラップ）内にイメージを完全に収める方法

Question

完全に機能的なカルーセルを作りましたが、カルーセルの右側に白いブロックが現れるという問題があります。私はそれを取り除きたい。助けてください。あなたのCSSの設定された画像幅の

<div class="carousel-inner"> 
    <div class="item active"> 
    <img src="Jellyfish.jpg" alt="image"> 
    <div class="carousel-caption"> 
     <h2>This is the heading</h2> 
     <p>This is paragraph</p> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="Koala.jpg" alt="image"> 
    <div class="carousel-caption"> 
     <h2 style="color:orange">This is the heading</h2> 
     <p>This is paragraph</p> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="Penguins.jpg" alt="image"> 
    <div class="carousel-caption"> 
     <h2>This is the heading</h2> 
     <p>This is paragraph</p> 
    </div> 
    </div> 
    <a href="#caro" class="left carousel-control" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a href="#caro" class="right carousel-control" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div> 

Answer 1

セットのイメージここ

.item img { 
    width:100% 
} 

デモである：https://jsfiddle.net/u9kkdLzb/

Answer 2

：100％

.carousel-inner>.item>img, .carousel-inner>.item>a>img { 
 
     display: block; 
 
     height: auto; 
 
     max-width: 100%; 
 
     line-height: 1; 
 
     margin:auto; 
 
     width: 100%; // Add this 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="carousel-inner"> 
 
    <div class="item active"> 
 
    <img src="Jellyfish.jpg" alt="image"> 
 
    <div class="carousel-caption"> 
 
     <h2>This is the heading</h2> 
 
     <p>This is paragraph</p> 
 
    </div> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="Koala.jpg" alt="image"> 
 
    <div class="carousel-caption"> 
 
     <h2 style="color:orange">This is the heading</h2> 
 
     <p>This is paragraph</p> 
 
    </div> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="Penguins.jpg" alt="image"> 
 
    <div class="carousel-caption"> 
 
     <h2>This is the heading</h2> 
 
     <p>This is paragraph</p> 
 
    </div> 
 
    </div> 
 
    <a href="#caro" class="left carousel-control" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left"></span> 
 
    </a> 
 
    <a href="#caro" class="right carousel-control" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right"></span> 
 
    </a> 
 
</div>