如何使 Bootstrap Carousel 保持图像纵横比？ [复制]

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

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

如果您从示例标记here 开始并删除额外的样式覆盖，您可以看到纵横比在不同的屏幕尺寸上得到了适当的维护。您可以使用上面的相同链接验证这一点。