twitter-bootstrap - Twitter Bootstrap轮播不同高度图像导致弹跳箭头

Question

我一直在使用 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">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

这个 jsfiddle 中也说明了这个问题。 (诚​​然不是我的，我在尝试解决这个问题时在一个单独的问题上发现了这个!)

我的问题是:如何强制轮播保持在固定高度( fiddle 中的第二个缩略图)并将较小的图像居中，同时将标题和箭头保持在相对于轮播的静态位置？

Answer 1

看起来像 bootstrap less/CSS 强制自动高度以避免在宽度必须更改以响应时拉伸(stretch)图像。我切换它以使宽度自动并固定高度。

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

然后我用类 peopleCarouselImg 定义 img像这样:

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

我将高度固定为 225 像素。我让宽度自动调整以保持纵横比正确。

这似乎对我有用。