Bootstrap crousell responsive sizing

Question

Ive got a carousel on my bootstrap html site. The Code looks like this:

  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active</li>
  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
  <div class="carousel-item active">
    <img class="d-block w-auto h-auto" src="header/1.png" alt="First slide">
  </div>
  <div class="carousel-item">
    <img class="d-block w-auto h-auto" src="header/2.png" alt="Second slide">
  </div>
  <div class="carousel-item">
    <img class="d-block w-auto h-auto" src="header/3.png" alt="Third slide">
  </div>
</div>

When I open the page on my desktop, the header looks great and the pictures are like I want them. But when I open the page on mobile (or scale it like it would be mobile), the pictures look off.

I also tried w-100 and h-100, but that would also create a not so great outcome.

any ideas?

And im running into a Problem when I use imp-fluid, this leaves a blank space on mobile, between the carousel and the next item — xadrus1799, Jul 04 '21 at 17:01

Mark · Answer 1 · 2021-07-04T21:37:07.220

Have you tried doing it with img-fluid? This way the image keeps it's proportions and stays 100% of the width even on mobile devices. So your code would become:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active</li>
  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
  <div class="carousel-item active">
    <img class="d-block img-fluid" src="https://picsum.photos/id/40/1920/1080" alt="First slide">
  </div>
  <div class="carousel-item">
    <img class="d-block img-fluid" src="https://picsum.photos/id/50/1920/1080" alt="Second slide">
  </div>
  <div class="carousel-item">
    <img class="d-block img-fluid" src="https://picsum.photos/id/60/1920/1080" alt="Third slide">
  </div>
</div>

Here's an working example: https://www.codeply.com/p/lICErBIvlN

If you want the carousel to be 100% height and width I'd suggest adding w-100 and vh-100 this keeps it 100% height of the device at all times. Also add an object-fit: cover to the img like so:

.carousel-item img {
    object-fit: cover;
}

The object-fit: cover; makes it that the image will always be covered no matter what screen size.

And the carousel:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active</li>
  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
  <div class="carousel-item active">
    <img class="d-block w-100 vh-100" src="https://picsum.photos/id/40/1920/1080" alt="First slide">
  </div>
  <div class="carousel-item">
    <img class="d-block w-100 vh-100" src="https://picsum.photos/id/50/1920/1080" alt="Second slide">
  </div>
  <div class="carousel-item">
    <img class="d-block w-100 vh-100" src="https://picsum.photos/id/60/1920/1080" alt="Third slide">
  </div>
</div>

Here's a working example: https://www.codeply.com/p/ihFFFtlpAx

Bootstrap crousell responsive sizing

1 Answers1