Twitter Bootstrap 走马灯（carousel）图片高度不同导致箭头跳动

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中的第二张缩略图），并使较小的图像居中，同时保持标题和箭头相对于走马灯静态位置不变？

- steve-gregory

Answer 1

似乎Bootstrap Less/CSS会强制自动设置高度，以避免在宽度需要响应变化时拉伸图像。我将其改为自动设置宽度并固定高度。

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

然后我像这样使用 peopleCarouselImg 类定义了图像：

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

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

这对我来说似乎有效。

- jduprey

---

请将您的代码放在两个 ` 符号之间。这样可以提高您的答案可读性。 - Afshin Mehrabani

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

如果这不是一张图片，该怎么办？ - Andrew Liu

图片是否响应式？ - Mohammed Nafie

@LionLiu，那么请看关于carouselNormalization的另一个答案，因为我也遇到了同样的问题。 - Malachi

Answer 2

试试这个（我正在使用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 等）。

为了响应式设计，你需要使用媒体查询。

编辑：谢谢大家，没想到这仍在被搜索。投票支持其他开发人员！

- Khairul

---

太棒了！在我的情况下，我只需要 .carousel { max-height: 700px; overflow: hidden;} - usefulBee

如果您缩小浏览器窗口或在较小的设备上查看，所有这些都无法正常工作，解决方案不具有响应性。 - Tosin Onikute

全屏幕工作..为了响应性需要使用媒体查询。 - Dhruv Thakkar

Answer 3

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

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

- Mile Mijatović

---

无法编辑您的答案，但您需要使用以下代码调用上面的函数：window.onload = function() { carouselNormalization(); }此方法运行流畅且响应灵敏！并且我在这里找到了原始来源：http://ryanringler.com/blog/2014/08/24/fixed-height-carousel-for-twitter-bootstrap - Malachi

这正是我所寻找的。谢谢。 - Eliezer Wohl

这个应该得到更多的赞！谢谢，亲切的先生/女士！ - Ross

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

- MrAnyx

---

顶级答案有数十个赞，而这个只有3个……你真正需要的是为所有轮播项设置高度：.carousel-item { height: 500px; }。非常好的答案。 - Justin

这是你所需要的全部内容。真是个聪明的人。把它发布上去吧！ - SeventhWarhawk

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

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 使其表现得更具响应性。

- SteJ

Answer 6

如果有人正在热切地搜索以解决图像旋转木马的问题，这个方法对我有帮助：

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

- Kyle Pennell

Answer 7

之前给出的解决方案会导致图片在旋转木马盒子中太小。解决碰撞控件问题的正确方法是重写 Bootstrap 的 CSS。

原始代码：

.carousel-control {
top: 40%;
}

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

.carousel-control {
top: 300px;
}

希望这能解决你的问题。

- Oliveira

---

当我实现这个功能时，侧边控件不再作为按钮工作，而箭头则下降到底部。 - Post Impatica

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

Answer 8

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

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

- Ankit Shukla

Answer 9

如果您希望此功能适用于任何高度的图像且不固定高度，请执行以下操作：

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

- awfullyawful

Answer 10

最近，我正在测试这个用于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;
  
}

- CrandellWS

---

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

你可以删除/更改 background-color: #777;。 - CrandellWS