如何使 Bootstrap 4 滑块中的图像具有响应能力？

Question

我正在使用 bootstrap 4 滑块创建网站页面，但图像没有响应，并且仅在 1980x1080 下看起来不错。如何使图像响应？我的代码看起来像这样：<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="7000">    <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">        <div class="carousel-item active img-fluid" style="background-image: url(img/slide11.jpg);">            <div class="carousel-caption text-center">                <h1><img class="hydrive_logo" src="img/Hydrive_logo.png" alt="Hydrive - logo"/></h1>                <a class="btn btn-outline-light btn-lg" href="#Bolid">Get Started</a>            </div>        </div>        <div class="carousel-item" style="background-image: url(img/HydriveTeam.jpg);"></div>        <div class="carousel-item" style="background-image: url(img/HydriveShell.jpg);"></div>    </div>    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">        <span class="carousel-control-prev-icon" aria-hidden="true"></span>    </a>    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">        <span class="carousel-control-next-icon" aria-hidden="true"></span>    </a></div>

Answer 1

由于您将图像设置为背景，.carousel-item并且这些项目上没有任何其他内容，因此您应该设置更多属性才能查看这些图像。例子：

.carousel-item {

  height: 400px; /* set some height*/

  /* optionals */

  background-repeat: no-repeat;  

  background-position: cneter;

  background-size: 100% 100%; 

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="7000">

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

        <div class="carousel-item active img-fluid" style="background-image: url(https://via.placeholder.com/1000x1000?text=First+Slide);">

            <div class="carousel-caption text-center">

                <img class="hydrive_logo" src="img/Hydrive_logo.png" alt="Hydrive - logo"/>

                <a class="btn btn-outline-light btn-lg" href="#Bolid">Get Started</a>

            </div>

        </div>

        <div class="carousel-item" style="background-image: url(https://via.placeholder.com/1000x1000?text=Second+Slide);"></div>

        <div class="carousel-item" style="background-image: url(https://via.placeholder.com/1000x1000?text=Third+Slide);"></div>

    </div>

    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">

        <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    </a>

    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">

        <span class="carousel-control-next-icon" aria-hidden="true"></span>

    </a>

</div>

附带说明：您不能使用图像作为标题，因此不要将其放置img在h1.