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

Posted 2023-02-16

【中文标题】Twitter Bootstrap轮播不同高度图像导致弹跳箭头

【英文标题】：Twitter Bootstrap carousel different height images cause bouncing arrows

【发布时间】：2012-11-03 16:49:54

【问题描述】：

我一直在使用 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 也说明了这个问题（诚然不是我的，我在尝试解决这个问题时发现了这个问题！）

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

【参考方案1】：

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

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

然后我用一个 peopleCarouselImg 类定义 img，如下所示：

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

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

这似乎对我有用。

【讨论】：

把你的代码放在两个`标记之间。它将提高您的答案的可读性。

完美，我唯一的抱怨是当图像缩小时它不在那个高度内居中，但这看起来好多了。谢谢 jduprey！

如果不是图片怎么办？

图片是否响应？

@LionLiu .. 然后查看有关 carouselNormalization 的其他答案，因为我遇到了同样的问题。

【参考方案2】：

前面给出的解决方案会导致图像对于轮播框来说可能太小。解决碰撞控件问题的正确方法是覆盖 Bootstraps CSS。

原码：

.carousel-control 
top: 40%;

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

.carousel-control 
top: 300px;

希望这能解决您的问题。

【讨论】：

当我实现这一点时，侧面控件不再作为按钮工作，并且 V 形符号下降到底部。

您应该使用固定值而不是百分比，因为您的容器具有可变高度。在我的设计中，300px 有效。也许你应该使用大约 150 像素。我认为它们停止作为按钮工作是因为按钮顶部有其他元素。

【参考方案3】：

试试这个（我正在使用SASS）：

/* SASS */
.carousel 
  max-height: 700px;
  overflow: hidden;

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

如果您愿意，可以将.carousel 包装成.container。

/* CSS */
.carousel 
  max-height: 700px;
  overflow: hidden;


.carousel .item img 
  width: 100%;
  height: auto;

关键是要保持高度一致。这就是 max-height 的用武之地，用于限制更大的图像。

或者，您可以将图像设置为背景图像，让您在高度和图像定位方面更加灵活（例如background-size、background-position 等）

为了响应，您需要使用媒体查询。

编辑：谢谢大家，不知道这仍在搜索中。投票以帮助其他开发者！

【讨论】：

太棒了！就我而言，我只需要 .carousel max-height: 700px;溢出：隐藏；

如果您调整浏览器大小或在较小的设备上查看，所有这些都不起作用，解决方案没有响应

全屏工作..用于处理媒体查询所需的响应能力。

【参考方案4】：

如果您想在不固定高度的情况下处理任何高度的图像，只需执行以下操作：

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

【参考方案5】：

最近我正在为 Bootstrap 轮播测试这个 CSS 源代码

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

/* 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;
  

【讨论】：

这导致侧边导航区域非常暗，看起来很奇怪。出于某种奇怪的原因，我通常喜欢使用最新的答案，但建议的答案效果很好，所以我应该从那里开始。

您可以删除/更改background-color: #777;

【参考方案6】：

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

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

 &:first-child 
   margin-left: 0;
   
  

【参考方案7】：

在你的页脚中包含这个 javascript（在加载 jQuery 之后）：

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

【参考方案8】：

尝试使用这个标准化 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 
    );
  


/**
 * Wait until all the assets have been loaded so a maximum height 
 * can be calculated correctly.
 */
window.onload = function() 
  carouselNormalization();

【讨论】：

无法编辑你的答案，但你需要这个来调用上面的函数：window.onload = function() car​​ouselNormalization();像魅力一样工作并且反应灵敏！...另外我在这里找到了原件：ryanringler.com/blog/2014/08/24/…

这正是我想要的。谢谢。

这值得更多的支持！谢谢你，好心的先生/女士！

【参考方案9】：

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

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 使其具有响应式行为。

【参考方案10】：

如果有人正在***地谷歌搜索以解决弹跳图像轮播问题，这对我有帮助：

.fusion-carousel .fusion-carousel-item img 
    width: auto;
    height: 146px;
    max-height: 146px;
    object-fit: contain;

【参考方案11】：

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

【参考方案12】：

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

【参考方案13】：

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

.carousel-item
    width: 100%; /*width you want*/
    height: 500px; /*height you want*/
    overflow: hidden;

.carousel-item img
    width: 100%;
    height: 100%;
    object-fit: cover;

【讨论】：

热门答案有几十个赞成票，这有 3 个……您真正需要的是设置所有轮播项目的高度：.carousel-item height: 500px; 。可靠的答案。

这实际上就是您所需要的。聪明的人。把这个放在那里！！

如果您的图像特别高，将object-fit 设置为contain 会得到更好的结果。值得一提的是，object-fit 在 IE 中不起作用。

【参考方案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);