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.

Improve this question
2

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.