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

我已经进行了各种尝试，以使图像完全伸展到滑块上，到目前为止，唯一对我有用的方法是定义一个具有固定 max-height 值的自定义类，然后应用这个类别，再加上 w-100 和 h-100 。我已根据您的代码为您提供了示例代码。希望对您有帮助。

class A {
  private String type;
  public String getType() {return type;}
}

class B extends A {
  private int type;

  public void go() {
    System.out.println("this.type: " + this.type + ", super.type: "+  super.getType());
  }

  public static void main(String[] args) {
    new B().go(); // prints: this.type: 0, super.type: null
  }
}

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

如何在Bootstrap Carousel中放入整个图像？

1 个答案: