Question

目前我正在使用Bootstrap模板中开箱即用的旋转木马并且效果很好，但是，当我添加图像并调整浏览器窗口大小时，它不会保持图像宽高比......而是它会重新调整图像水平。

现在我尝试了许多变体来维护图像宽高比，因为窗口调整大小，以下代码是我得到的最接近的代码。话虽这么说，这段代码确实保持了宽高比，但是当窗口大小调整为手机大小时，图像高度基本上是50px，你不能告诉图像是什么。

我想要的是，当您调整浏览器大小时，轮播广告的行为与此网站上的行为类似：http://teekay.com/

我目前的代码：转盘：

<!-- carousel-->
    <div id="myCarousel" data-ride="carousel" class="carousel slide">
      <!-- Indicators-->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div role="listbox" class="carousel-inner">
        <div class="item active"><img src="../images/carousel_resize_3.jpg" alt="First slide" class="img-responsive"/>
          <div class="container">
            <div class="carousel-caption">
              <h1>text1</h1>
              <p></p>
              <p><a href="/login" role="button" class="btn btn-lg btn-warning">Sign up today</a></p>
            </div>
          </div>
        </div>
        <div class="item"><img src="../images/carousel_resize_1.jpg" alt="Second slide" class="second-slide"/>
          <div class="container">
            <div class="carousel-caption">
              <h1>text2</h1>
              <p></p>
              <p><a href="#moreInfo" role="button" class="btn btn-lg btn-warning">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item"><img src="../images/carousel_resize_2.jpg" alt="Third slide" class="third-slide"/>
          <div class="container">
            <div class="carousel-caption">
              <h1>text3</h1>
              <p></p>
              <p><a href="#appInfo" role="button" class="btn btn-lg btn-warning">Browse jobs</a></p>
            </div>
          </div>
        </div>
      </div><a href="#myCarousel" role="button" data-slide="prev" class="left carousel-control"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a><a href="#myCarousel" role="button" data-slide="next" class="right carousel-control"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>
    </div>
    <!-- /.carousel-->

我的CSS：

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  /*height: 500px;*/
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  /*height: 500px;*/
  background-color: #777;
}
/*.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}*/

我在许多Stack Overflow帖子中尝试了答案，但我似乎无法让旋转木马缩小，但也保持纵横比。我错过了什么？

感谢您的帮助！

编辑：

我设法通过以下代码来保持宽高比，但是现在当浏览器调整大小时，旋转木马整体上没有变小，任何想法如何做到这一点？

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: 500px;
}

img {
    height: 500px;
    width: 1920px;
    /*object-fit: contain;*/
    object-fit: cover;
}

Answer 1

Carousel图像默认在最新的Bootstrap 3 { display: block; max-width: 100%; height: auto; }中响应。因此，无需为图像添加.img-responsive类。（此外，无需将.carousel-caption包裹在.container）

中

如果您从示例标记here和删除多余的样式覆盖开始，您可以看到在不同的屏幕尺寸上正确维护了宽高比。您可以使用上面的相同链接验证这一点。

如何使Bootstrap Carousel保持图像宽高比？

编辑：

1 个答案: