Question

我希望能够让我的旋转木马扩展到某个最大高度，然后不再在页面上展开。但是，它应该仍然适当地缩放图像，保持纵横比，但是＆＃34; crop＆＃34;图片。

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

正如您所看到的，当您更改浏览窗口的宽度时，图像会缩放，当您进入一个非常宽的浏览器时，图像会被放大＆＃34;放大＆＃34;保持宽高比。但是，此示例使用carousel-fullscreen标记。这使得无论窗口大小如何，旋转木马都会占据全屏。我希望能够设置一个硬限制，例如max-height：700px，然后在浏览器非常大的情况下，图像仍然缩放和放大，效果相同。

我也尝试在其他问题中使用建议将图像放入div中，然后使用background-image（...）和background-size：cover，但仍然无法获得效果我＆＃39;我正在寻找。

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

如果我设置了最大高度，当到达时，图像就会被拉伸，高度会停止。

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

当您将窗口拖入和拖出时，可以看到效果。

如果需要进一步澄清我正在寻找的内容，请告诉我。

Answer 1

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

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

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

Answer 2

在尝试了我在互联网上找到的各种解决方案后，我能够找到解决方案来解决我想要的问题。事实证明这是一个非常简单的解决方案。

这是我使用的更新的CSS：

.container-fluid {
    padding: 80px 120px;    
}

.carousel .item {   
    max-height: 300px;
}

.carousel-inner img {   
    width: 100%;
}

.carousel-caption h3 {
    color: #fff !important;  
}

.carousel-caption {
    top: 40%;
}

现在，当屏幕非常宽时，这会影响图像不被拉伸。相反，图像保持其比例和＆＃34;缩放＆＃34;这样就不再能看到图像的某些底部了。此外，通过此修复，我能够使标题保持垂直居中。

以下是工作代码的更新小提琴：https://jsfiddle.net/hildet/y12b3bxc/

如何在两个方向上缩放自举旋转木马滑块并具有最大高度？

2 个答案: