Twitter Bootstrap旋转木马不同高度的图像会导致弹跳箭头 [英] Twitter Bootstrap carousel different height images cause bouncing arrows

问题描述

我一直在使用Bootstrap的轮播类，到目前为止，它很简单，但是我遇到的一个问题是，不同高度的图像会导致箭头上下反弹以适应新的高度。 p>

这是我用于轮播的代码：

 < ; 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> 
< ;!-轮播导航-> 
< 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 （当然不是我的，我在尝试解决此问题时是在一个单独的问题上发现的！）

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

解决方案

看起来，bootstrap less / CSS会强制自动调整高度，以免在必须更改宽度才能响应时拉伸图像。我将其切换为自动设置宽度并固定高度。

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

然后用 peopleCarouselImg 类定义img像这样：

  .peopleCarouselImg img {
 width：auto; 
高度：225像素； 
最大高度：225像素； 
} 
  

我将高度固定为225px。我让宽度自动调整以保持正确的宽高比。

这似乎对我有用。

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 bounce up and down to adjust to the new height..

This is the code I'm using for my carousel:

<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>

The problem is also illustrated in this jsfiddle (Admittedly not mine, I found this on a separate question while trying to solve this problem!)

My question is: How can I force the carousel to stay at a fixed height (second thumbnail in the fiddle) and center smaller images while keeping the captions and arrow in a static position relative to the carousel?

解决方案

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.

这篇关于Twitter Bootstrap旋转木马不同高度的图像会导致弹跳箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！