Twitter Bootstrap carousel different height images cause bouncing arrows

Question

I\'ve been using Bootstrap\'s carousel class and it has been straightforward so far, however one problem I\'ve had is that images of different heights cause the arrows to bo

Answer 1

It looks like bootstrap less/CSS forces an automatic height to avoid stretching the image when the width has to change to be responsive. I switched it around to make the width auto and fix the height.

  
  ...

I then define img with a class peopleCarouselImg like this:

.peopleCarouselImg img {
  width: auto;
  height: 225px;
  max-height: 225px;
}

I fix my height to 225px. I let the width automatically adjust to keep the aspect ratio correct.

This seems to work for me.