Question

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

我希望旋转木马显示全宽（如现在）但不是裁剪高度。我尝试在不同的容器中将min-height，height等设置为100％但没有结果。任何两分钱？

Answer 1

对于Bootstrap 3，您只需要：

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

Answer 2

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

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

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

Answer 4

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

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

Answer 5

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

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

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

以下是codepen中的 Java Web Start ，调整预览窗口的大小以查看其工作原理。

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

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

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 */
 }

Twitter Bootstrap：旋转木马图像的宽度和高度

6 个答案: