Bootstrap轮播：滑动时图像超出div答案

【问题标题】：Bootstrap carousel: images out of div when slidingBootstrap轮播：滑动时图像超出div
【发布时间】：2012-11-15 09:55:20
【问题描述】：

我有一个我无法解决的问题。我正在使用引导程序的轮播，除了转换之外一切正常：当滑动转换开始时，下一个项目出现在 myCarousel div 之外，而之前的活动项目滑出 myCarousel div，因为它们正在被我的下一个项目替换。

这是我的 html 代码：

<div id="myCarousel" class="carousel slide span6">
     <div id="carousel-inner">
            <div class="active item">
                 <img src="img/abstract-landscape-paintings-bursting-sun.jpg" />
             </div>
             <div class="item">
                  <img src="img/charnwood_forest_landscape.jpg" />
             </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>

我只使用轮播脚本：

    $(document).ready(function() {
    $(".carousel").carousel({
        interval: 5000,
        pause: "hover",
    });
});

这是我的问题示例的链接，您可以查看我的整个代码：http://todoapp.nfshost.com/slide

谁能看出问题所在？

谢谢！

【问题讨论】：

标签： twitter-bootstrap carousel transition slide

【解决方案1】：

<div id="myCarousel" class="carousel slide span6" style="overflow:hidden">
 <div id="carousel-inner">
        <div class="active item">
             <img src="img/abstract-landscape-paintings-bursting-sun.jpg" />
         </div>
         <div class="item">
              <img src="img/charnwood_forest_landscape.jpg" />
         </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>

Hey Friend 添加隐藏在 myCarousel id 中的溢出。

【讨论】：

我就知道会这么简单。。谢谢！
我面临同样的问题，溢出的东西对我不起作用:(

【解决方案2】：

你可以在你的css中添加这个：

.carousel { overflow: hidden; }

和

.item { overflow: hidden: }

【讨论】：

我就知道会这么简单。。谢谢！
你太棒了，先生！你让我免于问一个潜在的重复问题。 css 有这些我自己永远无法弄清楚的小技巧真是太疯狂了。

【解决方案3】：

只需在图片中添加width:100%;

img {
    width: 100%;
}

【讨论】：

【解决方案4】：

我尝试了 Kader 的解决方案来设置“溢出：隐藏”，但由于某种原因，它只适用于大屏幕。 div 外的溢出仍然出现在较小的屏幕上。

最终，这是我添加到页面顶部以解决此问题的样式：

.carousel-inner > .next {
    display: none;
 }
 .carousel-inner > .prev {
    display: none;
 }

传入的图像在过渡期间添加了 .next 或 .prev 类。通过隐藏这个元素，它可以防止溢出问题。

可能有一个更优雅的解决方案，但它快速、简单且有效。

【讨论】：

【解决方案5】：

如果overflow:hidden 则尝试修复carousel-item 的高度

#carousel-item {
    height: 40rem;
}

和，

img {
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
  }

【讨论】：

【解决方案6】：

好的，所以这些解决方案都不适合我，但我终于发现在轮播上使用最大高度可以避免图像超出范围：

.carousel {
    max-height: whatever;
}

【讨论】：