6

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.

S.C.
  • 900
  • 1
  • 13
  • 39
  • Related: [Twitter Bootstrap carousel different height images cause bouncing arrows](http://stackoverflow.com/questions/13391566/twitter-bootstrap-carousel-different-height-images-cause-bouncing-arrows). – fracz Nov 03 '15 at 19:26
  • here's a solution for this in the follow link: http://stackoverflow.com/a/38447057/4767208 – Hetdev Jul 18 '16 at 22:44

1 Answers1

8
<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.

S.C.
  • 900
  • 1
  • 13
  • 39