Twitter Bootstrap：如何使轮播图像全屏宽度和高度

Question

这似乎是一个不起眼的问题，但在花费几个小时来调整 Twitter Bootstrap 轮播示例（http://twitter.github.io/bootstrap/examples/carousel.html）后，我求助于 SO。

我希望轮播可以显示全宽度（就像现在一样），但不要裁剪高度。我已经尝试在不同容器中设置min-height、height等为100%，但没有任何结果。有什么建议吗？

- Lasse

---

问题中的链接已经移动到这里：Carousel Template - Bootstrap。 - julian soro

Answer 1

对于 Bootstrap 3，你只需要：

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

- Nate Beers

Answer 2

从Bootstrap网站上的旋转木马示例中，如果调整浏览器窗口大小，您会发现图像实际上是在x轴上被拉伸的。为了实现相同的效果，请使用他们的CSS：

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

最后两个属性，min-width 和 height，非常重要。height 属性设置为轮播的期望大小。

最后，您将希望使用 img 标签来放置您的图片，而不是 background-image。以下是更完整的示例：

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

希望这能对您有所帮助。干杯！

- julian soro

---

我应该补充说明，这段代码片段是针对Bootstrap v2的，可能与后续版本的Bootstrap不兼容。 - julian soro

Answer 3

如果您想在幻灯片中插入图片，请使用以下代码：

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

- Becky

Answer 4

我想我已经找到了一个简单的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;
}

- Kerry Smyth

Answer 5

虽然这已经是三年前的事情了，但“Nate Beers”提供的解决方案解决了我的问题，当时我正在使用Bootstrap 3.3.7。

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

而且，“min-width”始终会覆盖“max-width”。

这里有一个在codepen中的示例，调整预览窗口的大小以查看其工作原理。

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

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

- SangyK

Answer 6

你可以简单地将它们的 CSS 更改为以下内容，但这会导致图像裁剪掉不适合的部分：

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

- user2998469