How to fix the carousel box in bootstrap?

Question

does anyone know how to fix the carousel box container in bootstrap even if the pictures have different sizes? because in my current code it slide but the box constantly changing according to the picture size.

code:

<h1>Carousel</h1>
<div class="container">
    <div class="row">
        <div class="well col-md-6">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <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="carousel-inner">
                    <div class="item active"><img src="images/1.jpg" /><div class="carousel-caption">image 1</div></div>
                    <div class="item"><img src="images/2.jpg" /><div class="carousel-caption">image 2</div></div>
                    <div class="item"><img src="images/3.jpg" /><div class="carousel-caption">image 3</div></div>
                </div>
                <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>
    </div>
</div>

script:

<script type="text/javascript">
    $(document).ready(function(){
        $('.carousel').carousel({
        interval: 2000
        })
    });
</script>

Answer 1

This will do the trick

   #myCarousel {
      width: 400px; // define suitable width here

    }

    .item img {
           max-width: 100%;
        }

max-width will prevent the image from overflowing the carousel

Answer 2

<h1>Carousel</h1> <div class="container">
    <div class="row">
        <div class="well col-md-6">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <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="carousel-inner">
                    <div class="item fiximage active"><img src="images/1.jpg" /><div class="carousel-caption">image 1</div></div>
                    <div class="item fiximage"><img src="images/2.jpg" /><div class="carousel-caption">image 2</div></div>
                    <div class="item fiximage"><img src="images/3.jpg" /><div class="carousel-caption">image 3</div></div>
                </div>
                <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>
    </div> </div>

css

.fiximage img {
   width: auto;
   min-height: 500px;
   height: 500px;
}