如何在Bootstrap-3中的旋转木马图像上裁剪边？不横向调整大小

Question

我正在使用Bootstrap的示例＆＃39; carousel.css和html＆＃39;使用图像大小1500x500

如果浏览器窗口小于图像，如果高度保持在500px，我如何保持图像的高度，并且在不扭曲图像的情况下，从每一侧裁剪相等的量？

这是Bootstrap提供的相关CSS，我正在使用。

.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

以下是HTML：

<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="images/1600x500.png" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Heading</h1>
          <p>Text text text.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn More</a></p>
        </div>
      </div>
    </div>

提前谢谢你。我和其他人一起搜索了这个论坛，似乎无法解决这个问题。听起来很简单。