IMG始终在滑块全屏上缩放

时间:2019-04-05 22:41:44

标签: javascript jquery css html5 bootstrap-4

我想知道如何将图像保留在滑块中以在全屏模式下显示完整尺寸。每当它不处于全屏状态时,就会显示全图,当它全屏时,它会切掉顶部和底部。

我试图调整图像大小,您有什么建议吗?

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <!-- Slide One - Set the background image for this slide in the line below -->
    <div class="carousel-item active" style="background-image: url('venveo-609390-unsplash.jpg')">
      <div class="carousel-caption d-none d-md-block">
        <h3>First Slide</h3>
        <p>This is a description for the first slide.</p>
      </div>
    </div>
    <!-- Slide Two - Set the background image for this slide in the line below -->
    <div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
      <div class="carousel-caption d-none d-md-block">
        <h3>Second Slide</h3>
        <p>This is a description for the second slide.</p>
      </div>
    </div>
</div>

我希望图片在全屏和全屏模式下都是全尺寸的。

enter image description here

0 个答案:

没有答案