'bootstrap carousel size changes with every image

I have a slider in bootstrap. The images are different sizes and the page rescales with each image. Is there a solution that all images in the slider are displayed with the same height but the slider still remains responsive?

<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>
htmlbootstrap-4carousel


Solution 1:[1]

Your image should be set to the below:

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

Solution 2:[2]

I would try to scale all the images to the same height using the CSS height property. That worked for me, let me know if that works for you.

img {
    height: 100px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tanya Rix
Solution 2 ujjwal shah

Related Questions