Фиксация размера контейнера карусели в Angular-UI-Bootstrap

Я использую угловой-UI-Bootstrap для моего проекта. В карусель, я должен загрузить изображения различных размеров некоторые больше, а некоторые меньше, чем контейнер. Как я могу исправить размер контейнера карусели так, чтобы карусель не изменяла размер При загрузке нового изображения каждый раз, в то время как загруженное изображение может поместиться в контейнер и сохранить его исходное соотношение?

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

В настоящее время я использую код, извлеченный из образец из угловой UI-загрузочный раздел карусели. Он не работает, поскольку я загружаю изображения различных размеров.

код протестирован на Google Chrome версии 38.0.2125.122 м.

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>

Я col-md-6 в верхнем div элемент и прикладных style="max-height:300px; margin:0 auto;" до img элемент.

теперь изображения разных размеров могут очень хорошо вписываться в карусель.