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

Question

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

我希望旋转木马显示全宽(如现在),但不显示裁剪高度.我尝试在不同的容器中将min-height,height等设置为100%但没有结果.任何两美分？

Answer 1

对于Bootstrap 3,您只需要:

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

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

我希望这有帮助.干杯!