Twitter Bootstrap：让轮播图像全宽和全高答案

【问题标题】：Twitter Bootstrap: Have carousel images full width and heightTwitter Bootstrap：让轮播图像全宽和全高
【发布时间】：2017-02-28 19:44:23
【问题描述】：

这似乎是一个微不足道的问题，但在他们的示例 (http://twitter.github.io/bootstrap/examples/carousel.html) 中摆弄了几个小时后，我求助于 SO 寻求帮助。

我希望轮播显示全宽（就像现在一样），但不显示裁剪高度。我尝试在不同的容器中将最小高度、高度等设置为 100%，但没有结果。两美分吗？

【问题讨论】：

问题的链接已移至此处：Carousel Template - Bootstrap

标签： twitter-bootstrap carousel

【解决方案1】：

对于 Bootstrap 3，您只需要：

.carousel img {
    min-width: 100%;
}

【讨论】：

【解决方案2】：

从引导站点上的示例轮播中，如果您调整浏览器窗口的大小，您会看到图像实际上是在 x 轴上拉伸的。要达到同样的效果，请使用他们的 CSS：

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

最后两个属性 min-width 和 height 很重要。高度设置为所需的轮播大小。

最后，您需要使用 img 标签来放置图像，而不是背景图像。这是一个更完整的例子：

<div class="item">
    <img src="image.jpg" />
    <div class="container">
        <div class="carousel-caption">
            <h1>Header</h1>
            <p class="lead">This is a caption</p>
            <a class="btn btn-large btn-primary" href="#">Large Button</a>
        </div>
    </div>
</div>

我希望这会有所帮助。干杯！

【讨论】：

我应该补充一点，这段代码 sn-p 是用于 Bootstrap v2，它可能与更高版本的 Bootstrap 不兼容

【解决方案3】：

认为我已经通过简单的 CSS 更改找到了解决方案？只需将以下内容从 (OLD) 更改为;

    .carousel {
  /*height: 500px; OLD*/
  /*margin-bottom: 60px; OLD*/

  /*max-width:1200px; THIS IS OPTIONAL (ANY SIZE YOU LIKE)*/
  margin:0 auto 60px;
}

.carousel .item {
    /*height: 500px; OLD*/
    /*background-color: #777; OLD*/

    width:100%;
    height:auto;
}
.carousel-inner > .item > img {
  /*position: absolute; OLD+WHY?*/
  /*top: 0; OLD+WHY?*/
  /*left: 0; OLD+WHY?*/

  min-width:100%;
  height:auto;
}

【讨论】：

【解决方案4】：

对您要在幻灯片中插入的每张图片使用以下内容：

<img class="img-responsive center-block" src="#">

【讨论】：

【解决方案5】：

虽然这可以追溯到 3 年前，但在使用 Bootstrap 3.3.7 时，“Nate Beers”提供的解决方案解决了我的问题

这是因为 'max-width' 设置了元素的最大宽度，当宽度大于 max-width 时会覆盖 width 属性。

'min-width' 也总是覆盖 'max-width'。

这里是 codepen 中的 an example，调整预览窗口的大小以查看其工作原理。

通过将大小调整为可能的最小宽度并与其他 2 个元素 i1 和 i2 进行比较，特别检查以下元素。

<div class="i3">Sample</div>

【讨论】：

【解决方案6】：

您可以简单地将他们的 css 更改为此，但它会导致您的图像裁剪不适合的内容：

.carousel-inner > .item > img {
   position: absolute;
   top: 0;
   left: 0;
   min-width: 100%;
   min-height: 500px; /* <--- Change this line to min-height */
 }

【讨论】：