html - 将图像放入轮播中，似乎无法修复

Question

我正在尝试将图像放入轮播中，但我似乎无法修复它。这是我的CSS代码：

   <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">
      <div class="carousel-item active">
        <img class="d-block w-100" src="images/Products/keyboard.jpg" alt="First slide">
        <div class="carousel-caption d-md-block">
          <h5 style="color:black">Welcome to LebShops</h5>
          <p style="color:black">Proud to be Lebanese</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="images/Products/mouse.jpg" alt="Second slide">
        <div class="carousel-caption d-md-block">
          <h5 style="color:black">Enjoy our vast selection of products</h5>
          <p style="color:black">Cash on delivery</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="images/Products/airpods.jpg" alt="Third slide">
        <div class="carousel-caption d-md-block">
          <h5 style="color:black">Whatever you need we got it !</h5>
          <p style="color:black">Cash on delivery</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

我怎样才能把我的照片放在这个轮播中？我已经使用 css 来调整它的高度我已经检查了其他人的问题，但它没有帮助我。

标签： htmlcssbootstrap-4

Answer 1

请看下面的片段。我在画廊中使用了不同尺寸的图像。

您需要添加的唯一更改是 css

img{
    object-fit: cover;
    vertical-align: middle;
    border-style: none;
    height: 70vh;
}

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

<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">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://picsum.photos/id/100/200/250" alt="First slide">
        <div class="carousel-caption d-md-block">
          <h5 style="color:black">Welcome to LebShops</h5>
          <p style="color:black">Proud to be Lebanese</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://picsum.photos/id/100/500/300" alt="Second slide">
        <div class="carousel-caption d-md-block">
          <h5 style="color:black">Enjoy our vast selection of products</h5>
          <p style="color:black">Cash on delivery</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://picsum.photos/id/100/300/350" alt="Third slide">
        <div class="carousel-caption d-md-block">
          <h5 style="color:black">Whatever you need we got it !</h5>
          <p style="color:black">Cash on delivery</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>