引导旋转木马大小随图像的变化而变化。

Question

我在鞋带里有个滑块。图像是不同的大小和页面重新标度与每个图像。是否有一种解决方案，即滑块中的所有图像都以相同的高度显示，但滑块仍然保持响应？

<div class="container-fluid" ><!--style="background-color:WhiteSmoke;"-->
<div class="row">
    <div class="col-md-4 mx-auto ">
<div id="carouselExampleSlideOnly" class="carousel slide rounded-3 " data-ride="carousel" data-interval="20" >
    
    <div class="carousel-inner ">
      <div id="ctest" class="carousel-item active">
        <img class="d-block w-100 rounded" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1108249:570905/full/full/0/default.jpg" alt="1">
      <div class="carousel-caption d-none d-md-block">
        <button type="button" class="btn btn-outline-dark" href="annotator#HS_1001">
            <a class="nav-link text-dark" href="annotator#HS_1001"> Weiter</a>
        </button>
      </div>
    </div>
      <div class="carousel-item">
        <img class="d-block w-100 rounded" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1107988:570686/full/full/0/default.jpg" alt="2" >
        <div class="carousel-caption d-none d-md-block">
            <button type="button" class="btn btn-outline-dark" href="annotator#HS_1001">
                <a class="nav-link text-dark" href="annotator#HS_1001"> Weiter</a>
            </button>
          </div>
      </div>
      <div class="carousel-item rounded">
        <img class="d-block w-100" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1127839:592145/full/full/0/default.jpg" alt="3">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1107996:570695/full/full/0/default.jpg" alt="4">
      </div>
      <div class="carousel-item rounded">
        <img class="d-block w-100" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1108004:570704/full/full/0/default.jpg" alt="5">
        <div class="carousel-caption d-none d-md-block">
            <button type="button" class="btn btn-outline-dark" href="annotator#HS_1001">
                <a class="nav-link text-dark" href="annotator#HS_1001"> Weiter</a>
            </button>
          </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1108012:570713/full/full/0/default.jpg" alt="6">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1108020:570722/full/full/0/default.jpg" alt="7">
      </div>
    </div>
  </div> 
</div>
</div>
</div>

Answer 1

您的图像应设置如下：

<img class="d-block rounded" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1108249:570905/full/full/0/default.jpg" alt="1" height="300px">

Answer 2

我会尝试使用CSS高度属性将所有图像缩放到相同的高度。这对我有用，如果对你有用，请告诉我。

img {
    height: 100px;
}