html - 我在我的网页上做了一个旋转木马，在电脑上工作正常，当我把它变小但在移动设备上它保持拉伸(stretch)

Question

我在我的网页上制作了一个旋转木马，在电脑上运行良好，当我在屏幕上缩小它时它也能很好地跟随它，但在移动设备上它保持垂直拉伸(stretch)使其非常长/高。我尝试过更改高度和所有其他标准程序，但令人困惑的部分是它在计算机上运行良好，但在移动设备上运行不佳。在我看来这不应该是可能的

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