How to fully fit an image inside carousel(Bootstrap)

css, html, twitter-bootstrap, twitter-bootstrap-3

Solution

Set Image `width:100%`

.item img {
  width:100%
}

Here is Demo: https://jsfiddle.net/u9kkdLzb/

Problem

I have made a fully functional carousel but the problem is that on the right side of carousel white block is appearing. I want to ged rid of that. Please help. ``` <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> ```

Original source