html - 如何将整个图像放入 Bootstrap Carousel 中？

Question

图像的底部总是被剪掉。有谁知道我该如何解决这个问题？感谢您的帮助!

这是我的 bootstrap carosuel 代码:

<div id="carousel_world">
    <div id="carouselExampleIndicatorss" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicatorss" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicatorss" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicatorss" data-slide-to="2"></li>
            <li data-target="#carouselExampleIndicatorss" data-slide-to="3"></li>
            <li data-target="#carouselExampleIndicatorss" data-slide-to="4"></li>
            <li data-target="#carouselExampleIndicatorss" data-slide-to="5"></li>
            <li data-target="#carouselExampleIndicatorss" data-slide-to="6"></li>
            <li data-target="#carouselExampleIndicatorss" data-slide-to="7"></li>
        </ol>
        <div id="inner_world" class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="../Pictures/world_photos/img1.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="../Pictures/world_photos/img2.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="../Pictures/world_photos/img3.jpg" alt="Third slide">
            </div>

            <div class="carousel-item">
                <img class="d-block w-100" class="d-block w-100 h-auto" src="../Pictures/world_photos/img4.jpg" alt="Third slide">
            </div>

            <div class="carousel-item">
                <img class="d-block w-100 h-auto" src="../Pictures/world_photos/img5.jpg" alt="Third slide">
            </div>

            <div class="carousel-item">
                <img class="d-block w-100 h-auto" src="../Pictures/world_photos/img6.jpg" alt="Third slide">
            </div>

            <div class="carousel-item">
                <img class="d-block w-100 h-auto" src="../Pictures/world_photos/img7.jpg" alt="Third slide">
            </div>
        </div>

        <a id="prev_caro_world" style="margin-left:-5%" class="carousel-control-prev" href="#carouselExampleIndicatorss" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a id="nxt_caro_world" style="margin-right:-5%" class="carousel-control-next" href="#carouselExampleIndicatorss" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

如有任何帮助，我们将不胜感激。任何帮助将不胜感激。

Answer 1

我做了各种尝试让图像完全拉伸(stretch)到 slider ，到目前为止唯一对我有用的是定义一个具有固定 ma​​x-height 值的自定义类，然后应用此类加上图像的 w-100 和 h-100。我已经根据您的代码为您制作了一个示例代码。希望对您有所帮助。

.custom-fixed-max-height {
    max-height: 250px;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div id="carousel_world">

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

    <!-- Sliders -->
    <div id="inner_world" class="carousel-inner">
      <div class="carousel-item active">
        <img class="h-100 w-100 custom-fixed-max-height" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="h-100 w-100 custom-fixed-max-height" src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="h-100 w-100 custom-fixed-max-height" src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" alt="Third slide">
      </div>
    </div>

    <!-- Arrows -->
    <a id="prev_caro_world" class="carousel-control-prev bg-info" href="#carouselExampleIndicatorss" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a id="nxt_caro_world" class="carousel-control-next bg-info" href="#carouselExampleIndicatorss" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>

  </div>

</div>