Correzione della dimensione del contenitore della giostra in Angular-UI-Bootstrap

Question

Sto usando Angular-UI-Bootstrap per il mio progetto. Nella giostra, devo caricare le immagini di dimensioni diverse, alcune sono più grandi e alcune sono più piccole del contenitore. Come posso fissare la dimensione del contenitore della giostra in modo tale che la giostra non ridimensioni ogni volta che caricate una nuova immagine, mentre l'immagine caricata può adattarsi al contenitore e mantenere il suo rapporto originale?

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

Attualmente, sto usando il codice estratto dal campione dal Angular-UI-Bootstrap carousel section. Non funziona perché sto caricando immagini di varie dimensioni.

Il codice è stato testato su Google Chrome versione 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> 

ho usato col-md-6 nel più alto div elemento ed applicato style="max-height:300px; margin:0 auto;" all'elemento img.

Ora, le immagini di diverse dimensioni possono adattarsi molto bene alla giostra.