html - 如何在两个方向上缩放 bootstrap carousel slide 并具有最大高度？

Question

我希望能够让我的旋转木马扩展到某个最大高度，然后不再在页面上进一步扩展。但是，它仍应适当缩放图像，保持纵横比，但“裁剪”图像。

我正在寻找的效果类似于可以在这里找到的效果: https://bootstrapious.com/tutorial/carousel/fullscreen.html

如您所见，当您更改浏览器窗口的宽度时，图像会缩放，当您到达一个非常宽的浏览器时，图像会“放大”以保持宽高比。然而，这个例子使用了 carousel-fullscreen 标签。这使得无论窗口大小如何，轮播都会占据全屏。我希望能够在 max-height: 700px 处设置一个硬限制，然后在浏览器非常大时图像仍然缩放和放大具有相同的效果。

我也尝试过使用其他问题中的建议将图像放在div中，然后使用background-image(...)和background-size:cover，但仍然无法获得我想要的效果为了。

这是我目前的实现: https://jsfiddle.net/hildet/yvkcLh1q/2/

如果我设置一个最大高度，当达到它时，图像的宽度就会被拉伸(stretch)，高度就会停止。

/* CSS */

.item img {
  width: 100%;
  height: auto
}

.carousel-inner img {
  width: 100%;
  margin: auto;
  max-height: 300px;
}

<!-- HTML -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://i.imgur.com/Vw04Buz.jpg" alt="Slide 1">
      <div class="carousel-caption">
        Caption Slide 1
      </div>
    </div>
    <div class="item">
      <img src="http://i.imgur.com/Vw04Buz.jpg" alt="Slide 2">
      <div class="carousel-caption">
        Caption Slide 2
      </div>
    </div>
    <div class="item">
      <img src="http://i.imgur.com/Vw04Buz.jpg" alt="Slide 3">
      <div class="carousel-caption">
        Caption Slide 3
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

将窗口拖入拖出即可看到效果。

如果需要进一步说明我在寻找什么，请告诉我。

Answer 1

我希望这对你有用。如果您需要任何帮助，请发表评论!

.item img {width: 100%; min-height: 100%;}

.carousel-inner img {
    width: 100%;    
    margin: auto;
    min-height: 100vh;
}