Search code examples
htmlcssbootstrap-4carousel

Bootstrap Carousel how to vertical align images with img-fluid class applied

I am trying to center the images both horizontally and vertically using the img-fluid class in the bootstrap carousel, I need the images to be fully visible(100%) and adaptable to different screens, for this i am using the img-fluid class, the only problem is which does not center the images vertically, so if i have a landscape image it is positioned at the top leaving a large space below. On the other hand, for portrait images there is no problem.

Landscape:

enter image description here

Portrait

enter image description here

This is the used code:

     <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="background-color:#333;">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item text-center active">
              <img class="img-fluid mw-100 mh-100" src="https://storage.googleapis.com/...">
            </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>

I have already tried to use align-middle and other combinations but without result, what can I do?

Solution

  • I solved it by myself using absolute positioning and removing the img-fluid class.

    Here below the updated code:

        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="background-color:#333;">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active" style="max-height:600px;">
          <img class="mw-100 mh-100" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;" src="https://storage.googleapis.com/...">
        </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>

    And here the screenshot:

    enter image description here