我一直在使用Bootstrap的旋转木马类，它已经直到目前为止，但我有一个问题是，不同的高度的图像导致箭头反弹上下调整到新的高度。
这是我用于我的轮播的代码：
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="image_url_300height"/>
<div class="carousel-caption">
<h4>...</h4>
<p>...</p>
</div>
</div>
<div class="item">
<img src="image_url_700height" />
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
问题也在这个jsfiddle(不可否认，我发现这是一个单独的问题，同时试图解决这个问题！)
我的问题是：如何强制旋转木马保持在固定的高度(小提琴的第二个缩略图)和中心较小的图像，同时保持字幕和箭头在相对于旋转木马的静态位置？
解决方法
它看起来较少bootstrap / CSS强制自动高度，以避免拉伸图像时，宽度必须更改为响应。我切换它，使宽度自动和固定的高度。
<div class="item peopleCarouselImg"> <img class="peopleCarouselImg" src="http://upload.wikimedia.org/..."> ... </div>
然后我定义img类的personCarouselImg像这样：
.peopleCarouselImg img {
width: auto;
height: 225px;
max-height: 225px;
}
我把我的高度固定为225px。我让宽度自动调整，以保持高宽比正确。
这似乎对我有用。