19

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

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

4

6 回答 6

17

对于 Bootstrap 3，您只需要：

.carousel img {
    min-width: 100%;
}
于 2015-09-04T16:24:52.363 回答
8

从引导站点上的示例轮播中，如果您调整浏览器窗口的大小，您会看到图像实际上是在 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>

我希望这有帮助。干杯!

于 2013-05-08T11:06:47.260 回答
1

认为我有一个简单的 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;
}
于 2014-09-10T04:57:00.880 回答
1

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

<img class="img-responsive center-block" src="#">
于 2015-03-06T20:09:45.083 回答
1

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

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

此外，“最小宽度”总是覆盖“最大宽度”。

这是codepen 中的一个示例，调整预览窗口的大小以查看它是如何工作的。

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

<div class="i3">Sample</div>
于 2017-02-28T11:20:25.323 回答
-2

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

.carousel-inner > .item > img {
   position: absolute;
   top: 0;
   left: 0;
   min-width: 100%;
   min-height: 500px; /* <--- Change this line to min-height */
 }
于 2013-11-16T02:44:58.633 回答