Fixing carousel container size in Angular-UI-Bootstrap

Question

I am using Angular-UI-Bootstrap for my project. In the carousel, I have to load images of different dimensions, some are bigger and some are smaller than the container. How can I fix the size of the carousel container such that the carousel will not resize upon loading a new image everytime, while the loaded image can fit into the container and maintaining its original ratio?

<div style="height:305px;">
    <carousel interval="carousel_interval">
        <slide ng-repeat="slide in slides" active="slide.active">
            <img ng-src="{{slide.image}}">
            <div class="carousel-caption">
                <h4>Slide {{$index}}</h4>
                <p>{{slide.text}}</p>
            </div>
        </slide>
    </carousel>
</div>

Currently, I am using the code extracted from the sample from the Angular-UI-Bootstrap carousel section. It does not work as I am loading in images of various dimensions.

The code is tested on Google Chrome version 38.0.2125.122 m.

Answer 1

<div class="col-md-6">
    <carousel interval="carousel_interval">
        <slide ng-repeat="slide in slides" active="slide.active">
            <img ng-src="{{slide.image}}" style="max-height:300px; margin:0 auto;">
            <div class="carousel-caption">
                <h4>Slide {{$index}}</h4>
                <p>{{slide.text}}</p>
            </div>
        </slide>
    </carousel>
</div>

I used col-md-6 in the topmost div element and applied style="max-height:300px; margin:0 auto;" to the img element.

Now, images of different sizes can fit into the carousel very well.