如何使 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 {&nbsp; height: 400px; /* set some height*/&nbsp; /* optionals */&nbsp; background-repeat: no-repeat;&nbsp;&nbsp;&nbsp; background-position: cneter;&nbsp; background-size: 100% 100%;&nbsp;}<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">&nbsp; &nbsp; <ol class="carousel-indicators">&nbsp; &nbsp; &nbsp; &nbsp; <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>&nbsp; &nbsp; &nbsp; &nbsp; <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>&nbsp; &nbsp; &nbsp; &nbsp; <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>&nbsp; &nbsp; </ol>&nbsp; &nbsp; <div class="carousel-inner" role="listbox">&nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-item active img-fluid" style="background-image: url(https://via.placeholder.com/1000x1000?text=First+Slide);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-caption text-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img class="hydrive_logo" src="img/Hydrive_logo.png" alt="Hydrive - logo"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="btn btn-outline-light btn-lg" href="#Bolid">Get Started</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-item" style="background-image: url(https://via.placeholder.com/1000x1000?text=Second+Slide);"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-item" style="background-image: url(https://via.placeholder.com/1000x1000?text=Third+Slide);"></div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">&nbsp; &nbsp; &nbsp; &nbsp; <span class="carousel-control-prev-icon" aria-hidden="true"></span>&nbsp; &nbsp; </a>&nbsp; &nbsp; <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">&nbsp; &nbsp; &nbsp; &nbsp; <span class="carousel-control-next-icon" aria-hidden="true"></span>&nbsp; &nbsp; </a></div>附带说明：您不能使用图像作为标题，因此不要将其放置img在h1.