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>

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

.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打包成.container。

Answer 3

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

＆＃13;

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 
    });
  }
}

＆＃13;

Answer 4

这是适合我的解决方案;我是这样做的，因为旋转木马中的内容是由用户提交的内容动态生成的（因此我们无法在样式表中使用静态高度） - 此解决方案也适用于不同大小的屏幕：

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使得这一行为具有反应性。

Answer 5

前面给出的解决方案导致图像对于转盘盒而言可能太小的情况。对碰撞控制问题的正确解决方案是覆盖Bootstraps CSS。

原始代码：

.carousel-control {
top: 40%;
}

在您自己的样式表中使用固定值覆盖变量（300px在我的设计中有效）：

.carousel-control {
top: 300px;
}

希望这可以解决您的问题。

Answer 6

如果您希望使用任何高度的图像并且不修复高度，请执行以下操作：

$('#myCarousel').on("slide.bs.carousel", function(){
     $(".carousel-control",this).css('top',($(".active img",this).height()*0.46)+'px');
     $(this).off("slide.bs.carousel");
});

Answer 7

最近我正在测试Bootstrap轮播的CSS源代码

设置为380的高度应设置为等于显示的最大/最高图像...

请使用以下CSS感谢，根据可用性测试投票/反驳此答案。

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  max-height: 100%;
  max-height: 380px;
  margin-bottom: 60px;
  height:auto;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
    background: rgba(0, 0, 0, 0.45);
}

/* Declare heights because of positioning of img element */
.carousel .item {
  max-height: 100%;
  max-height: 380px;
  background-color: #777;
}
.carousel-inner > .item > img {
 /*  position: absolute;*/
  top: 0;
  left: 0;
  min-width: 40%;
  max-width: 100%;
  max-height: 380px;
  width: auto;
  margin-right:auto;
  margin-left:auto;
  height:auto;

}

Answer 8

在页脚中包含此JavaScript（加载jQuery后）：

$('.item').css('min-height',$('.item').height());

Answer 9

如果有人疯狂地谷歌搜索弹跳图像旋转木马的东西，这有助于我：

import java.util.Arrays;

int[][] arr1;
int[][] arr2;
//...
if (Arrays.deepEquals(arr1, arr2))

Answer 10

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

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

您可以在css文件中使用以下行：

ul[rn-carousel] {
 > li {
 position: relative;
 margin-left: -100%;

 &:first-child {
   margin-left: 0;
   }
  }
}

Answer 12

 .className{
 width: auto;
  height: 200px;
  max-height: 200px;
   max-width:200px
   object-fit: contain;
}

Answer 13

此jQuery函数最适合我。我在WordPress主题中使用了bootstrap 4，并且使用了完整的jQuery而不是jQuery slim。

// Set all carousel items to the same height
function carouselNormalization() {

    window.heights = [], //create empty array to store height values
    window.tallest; //create variable to make note of the tallest slide

    function normalizeHeights() {
        jQuery('#latest-blog-posts .carousel-item').each(function() { //add heights to array
            window.heights.push(jQuery(this).outerHeight());
        });
        window.tallest = Math.max.apply(null, window.heights); //cache largest value
        jQuery('#latest-blog-posts .carousel-item').each(function() {
            jQuery(this).css('min-height',tallest + 'px');
        });
    }
    normalizeHeights();

    jQuery(window).on('resize orientationchange', function () {

        window.tallest = 0, window.heights.length = 0; //reset vars
        jQuery('.sc_slides .item').each(function() {
            jQuery(this).css('min-height','0'); //reset min-height
        }); 

        normalizeHeights(); //run it again 

    });

}

jQuery( document ).ready(function() {
    carouselNormalization();
});

来源：

https://gist.github.com/mbacon40/eff3015fe96582806da5

Answer 14

请注意，此处标准化高度的jQuery解决方案可能会因IE而失效。

经过一些测试（使用Bootstrap 3）后，IE似乎不会理会图像的大小，除非它们实际被渲染。如果您将窗口缩小，则活动项目的图像会调整大小，但背景图像会保留其高度，因此“最高”高度保持不变。

在我的情况下，我们仅在这些项目上渲染图像，并且这些图像仅相差几个像素。因此，我选择了使用活动图像的高度来设置所有图像的样式。调整其他所有内容的大小以适合高度，因此，如果宽高比变化很大，请记住这一点。

    function carouselNormalization() {
        var items = $('.carousel .item');

        if (items.length) {
            function normalizeHeights() {
                let activeImageHeight = items.filter('.active').find('img').height();
                items.each(function() {
                    $(this).find('img').css('height',  activeImageHeight + 'px');
                });
            };
            normalizeHeights();

            $(window).on('resize orientationchange', function() {
                items.each(function() {
                    $(this).find('img').removeAttr('style');
                });
                normalizeHeights();
            });
        }
    }
    $(window).on('load', carouselNormalization);

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

14 个答案: