Stretch and fill image in Bootstrap carousel

Question

Hi guys i am using bootstrap carousal and having some problem with image height and width. Even though i define it in the img attribute it still displays as original resolution,following is the code i am using

<div class="col-md-6 col-sm-6">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/650x450/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </div>
</div>

Here is demo of that.

What should i do to fill the image in a certain height and width regardless of its original resolution.

Answer 1

Add this to the css of the file. This would restrict the height and width of the image and hence align it.

.item img { max-height: 300px; max-width: 350px; }