Twitter Bootstrap carousel different height images cause bouncing arrows

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.

<div class="item peopleCarouselImg">
  <img src="http://upload.wikimedia.org/...">
  ...
</div>

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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)