如何使引导旋转木马保持图像纵横比

目前我使用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;
}