Question

我已经在网页上制作了一个轮播，在计算机上可以正常运行，当我在屏幕上将其缩小时，它会很好地跟随它，但是在移动设备上，它会保持垂直拉伸，使其非常长/高。我已经尝试过更改高度和所有其他标准程序，但令人困惑的部分是它在计算机上运行得很好，但在移动设备上却无法运行。在我的脑海里这不可能

.carousel {
  max-height: 790px;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block !important;
}

.carousel img {
  width: 100% !important;
  max-height: 790px;
}

.carousel-inner {
  width: 90% !important;
  margin: auto !important;
}

<div style="max-width:100%" class="container">
  <div class="row">
    <div id="demo" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->
      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
      </ul>

      <!-- The slideshow -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="img\homeg1.jpeg" alt="First Picture">
        </div>
        <div class="carousel-item">
          <img src="img\homeg3.jpeg" alt="Second Picture">
        </div>
        <div class="carousel-item">
          <img src="img\homeg4.jpeg" alt="Third Picture">
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>
  </div>
</div>

Answer 1

您所需要的只是通过img-fluid类进行响应的图像，您将在台式机和移动设备上获得类似的体验...

我已经删除了您的css ...从父div中删除了内联max-width:100% ...向图像添加了img-fluid类

以下代码对您有用吗？

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div id="demo" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->
      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
      </ul>

      <!-- The slideshow -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg" alt="First Picture">
        </div>
        <div class="carousel-item">
          <img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg" alt="Second Picture">
        </div>
        <div class="carousel-item">
          <img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/3.jpg" alt="Third Picture">
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>
  </div>
</div>

我已经在网页上制作了轮播，在计算机上可以正常使用；当我将其缩小但在移动设备上时，它仍然处于拉伸状态

1 个答案: