Twitter bootstrap 推特引导：具有全宽和全高的旋转木马图像

这似乎是一个微不足道的问题，但在他们的示例（）中，经过几个小时摆弄Twitter引导转盘之后，我求助于SO以获得一些帮助

---

我希望旋转木马显示全宽（与现在一样），但不显示裁剪高度。我曾尝试在不同的容器中将最小高度、高度等设置为100%，但没有结果。任何两美分？

来自引导站点上的示例转盘，如果调整浏览器窗口的大小，您将看到图像实际上正在x轴上拉伸。要实现相同的效果，请使用他们的CSS：

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

最后两个属性“最小宽度”和“高度”非常重要。高度设置为转盘的所需大小

最后，您需要使用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>

标题
这是一个标题

---

我希望这有帮助。干杯

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

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

.carousel-inner>.item>img{
位置：绝对位置；
排名：0；
左：0；
最小宽度：100%；
最小高度：500px；/*我想我有了一个简单CSS更改的解决方案吗？只需将以下内容从（旧）更改为

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

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

对于Bootstrap 3，您只需要：

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

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

其原因是“max width”设置元素的最大宽度，当宽度大于max width时，该元素将覆盖width属性

此外，“最小宽度”始终覆盖“最大宽度”

这里是在codepen中，调整预览窗口的大小以查看其工作方式

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

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

示例
我应该补充一点，这段代码是针对Bootstrap v2的，它可能与Bootstrap的更高版本不兼容问题的链接已移到此处：
<div class="i3">Sample</div>