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中得到了说明(不可否认,我试图解决这个问题时,我在一个单独的问题上发现了这个问题!)

我的问题是:如何强制旋转木马停留在固定高度(小提琴中的第二个缩略图)并居中较小的图像,同时将标题和箭头保持在相对于旋转木马的静态位置？

Answer 1

看起来像bootstrap less/CSS强制自动高度,以避免在宽度必须变为响应时拉伸图像.我切换它以使宽度自动并固定高度.

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

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

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

我将身高调高到225px.我让宽度自动调整以保持宽高比正确.

这似乎对我有用.

Answer 2

试试这个(我正在使用SASS):

.carousel {
  max-height: 700px;
  overflow: hidden;

  .item img {
    width: 100%;
    height: auto;
  }
}

如果您愿意,可以将其包装.carousel成a .container.

Answer 3

尝试使用这个规范化Bootstrap轮播幻灯片高度的jQuery代码

function carouselNormalization() {
  var items = $('#carousel-example-generic .item'), //grab all slides
    heights = [], //create empty array to store height values
    tallest; //create variable to make note of the tallest slide

  if (items.length) {
    function normalizeHeights() {
      items.each(function() { //add heights to array
        heights.push($(this).height());
      });
      tallest = Math.max.apply(null, heights); //cache largest value
      items.each(function() {
        $(this).css('min-height', tallest + 'px');
      });
    };
    normalizeHeights();

    $(window).on('resize orientationchange', function() {
      tallest = 0, heights.length = 0; //reset vars
      items.each(function() {
        $(this).css('min-height', '0'); //reset min-height
      });
      normalizeHeights(); //run it again 
    });
  }
}

Answer 4

您还可以使用此代码来调整所有轮播图像。

.carousel-item{
    width: 100%; /*width you want*/
    height: 500px; /*height you want*/
    overflow: hidden;
}
.carousel-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Answer 5

这是对我有用的解决方案；我这样做是因为轮播中的内容是从用户提交的内容动态生成的（因此我们不能在样式表中使用静态高度） - 此解决方案也适用于不同大小的屏幕：

function updateCarouselSizes(){
  jQuery(".carousel").each(function(){
    // I wanted an absolute minimum of 10 pixels
    var maxheight=10; 
    if(jQuery(this).find('.item,.carousel-item').length) {
      // We've found one or more item within the Carousel...
      jQuery(this).carousel(); // Initialise the carousel (include options as appropriate)
      // Now we iterate through each item within the carousel...
      jQuery(this).find('.item,.carousel-item').each(function(k,v){ 
        if(jQuery(this).outerHeight()>maxheight) {
          // This item is the tallest we've found so far, so store the result...
          maxheight=jQuery(this).outerHeight();
        }
      });
      // Finally we set the carousel's min-height to the value we've found to be the tallest...
      jQuery(this).css("min-height",maxheight+"px");
    }
  });
}

jQuery(function(){
  jQuery(window).on("resize",updateCarouselSizes);
  updateCarouselSizes();
}

从技术上讲，这不是响应式的，但出于我的目的，这on window resize使得它的行为具有响应性。