Ustalanie rozmiaru kontenera karuzeli w Angular-UI-Bootstrap

Question

Używam dla mojego projektu Angular-UI-Bootstrap. W karuzeli muszę ładować obrazy o różnych wymiarach, niektóre są większe, a inne mniejsze niż kontener. Jak mogę naprawić rozmiar pojemnika na karuzelę tak, aby karuzela nie zmieniała rozmiaru po załadowaniu nowego obrazu za każdym razem, podczas gdy załadowany obraz może zmieścić się w pojemniku i zachować oryginalny stosunek?

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

Obecnie używam kod wyodrębnione z próbki z Angular-UI-Bootstrap carousel section. Nie działa tak, jak ładuję obrazy o różnych wymiarach.

Kod jest testowany w przeglądarce Google Chrome w wersji 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> 

kiedyś col-md-6 w najwyższej div elementu i stosowane style="max-height:300px; margin:0 auto;" do elementu img.

Teraz obrazy o różnych rozmiarach bardzo dobrze pasują do karuzeli.