Angular-UI-Bootstrap Carousel Container Size

Question

I am using Angular-UI-Bootstrap for my project. In a carousel, I have to upload images of different sizes , some of them larger and some smaller than a container. How can I fix the size of the carousel container so that the carousel will not change when a new image is loaded every time, while the downloaded image can fit into the container and maintain 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> 

I am currently using code extracted from an example from the Angular -UI-Bootstrap carousel section . This does not work as I upload images of various sizes.

The code is tested in the version of Google Chrome 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.