My carousel enlarges and shrinks when it cycles to 3rd slide?

Question

I have made a carousel of 3 slides. When it cycles to 3rd slide it enlarges and gets overlapped. The first two slides work but not the last slide.

My code:

<div class="col-md-8">
            <div id="myCarousel" class="carousel slide" data-ride="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="1"></li>
                </ol>

                <!-- Wrapper for slides-->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="" alt="myimage1" style="width: 100%">
                        <div class="carousel-caption">
                            <h3>Your news title</h3>
                            <p>news in short</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="" alt="myimage2" style="width: 100%">
                        <div class="carousel-caption">
                            <h3>Your news title</h3>
                            <p>news in short</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="" alt="myimage3" style="width: 100%">
                        <div class="carousel-caption">
                            <h3>Your news title</h3>
                            <p>news in short</p>
                        </div>
                    </div>
                </div>

                <!-- Left and Right controls -->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>  

In css:

.carousel.inner > .item > img {
    width: 640px;
    height: 360px;
}

Here are the screenshots for more clarification:

slide 1:

slide 2:

slide 3:

In the third slide you can see the image is enlarged and for 1st two slides size is perfect. How can I fix this.

Answer 1

What are the original image sizes? It appears to me, that they have different aspect ratios and therefore the last image gets "too big".

A quick fix would be to crop the images to all have the same size using a tool similar to Photoshop or GIMP.

Then, of course, there's a way to crop them using CSS. There's probably a typo in your CSS because you seem to mean to write .carousel-inner > .item > img (with dash instead of . between carousel and inner)

(this was copied & edited from the comment as requested by @rock stone)

Answer 2

you need to make all the picture for your slider on the same resolution using a photo editor but if you cant change the resolution of the picture try to put max-width and max-height instead of width and height