Sửa kích thước vùng chứa băng chuyền trong Angular-UI-Bootstrap

Question

Tôi đang sử dụng Angular-UI-Bootstrap cho dự án của mình. Trong băng chuyền, tôi phải tải hình ảnh có kích thước khác nhau, một số lớn hơn và một số nhỏ hơn so với vùng chứa. Làm cách nào để khắc phục kích thước của vùng chứa băng chuyền sao cho băng chuyền sẽ không thay đổi kích thước khi tải hình ảnh mới mọi lúc, trong khi hình ảnh được tải có thể vừa với vùng chứa và duy trì tỷ lệ ban đầu của nó?

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

Hiện nay, tôi đang sử dụng mã được chiết xuất từ ​​các mẫu từ Angular-UI-Bootstrap carousel section. Nó không hoạt động như tôi đang tải trong hình ảnh của các kích thước khác nhau.

Mã được thử nghiệm trên Google Chrome phiên bản 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> 

tôi đã sử dụng col-md-6 trong các yếu tố trên cùng div và áp dụng style="max-height:300px; margin:0 auto;" tới phần tử img.

Giờ đây, hình ảnh có kích thước khác nhau có thể vừa với băng chuyền.