Adjusting Image Attributes in Bootstrap Carousel

Tags: Bootstrap

I'm building a new site with Bootstrap and it is fun fun fun!   I was pulling in images from an api that were various sizes and dumping them into a Boostrap carousel using an AngularJS repeater.  The varying sizes made for a bad user experience so I needed to center the images and standardize the height so the carousel controls didn't bounce all over the place.

This is the carousel item div:

<div class="carousel-inner"> 
  <div class="item carousel-image" ng-class="{active:$first}"  ng-repeat="picture in myModel.Pictures">  
  <img src="{{picture.urlFullsize}}" class="properties" alt="properties" />
  </div>
</div>

The carousel-image is the css class i added and here it is:

.carousel-image img {
  width: auto;
  height: 330px;
  max-height: 330px;
  min-height: 330px;
  overflow: hidden;
  margin: 0 auto;
}

Setting margin to auto will center the div in the carousel.  And setting the heights will force the height to always be 330px in this case.

 

No Comments

Add a Comment