How to fit fit carousel images? (HTML/CSS/Bootstrap4)

Question

I'm new in HTML, CSS, and Bootstrap and I'm trying to create a carousel for my page.

The carousel is working, but the images are not fitting to the page. The size is too big (height and width) and I'm trying to fit but it's not working properly.

My codes are:

.carousel-inner img{
 width:100%;
 height: 40%;
}
.carousel-caption {
  position: absolute;
 top: 60%;
  transform: translateY(-60%);
}
.carousel-caption h1{
font-size:470%;
text-transform: uppercase;
text-shadow:3px 3px 15px #000;
}
.carousel-caption h3{
  color:  #ffc107;
font-size: 200%;
font-weight: 500;
text-shadow: 3px 3px 10px #000;
padding-botton: 1rem;
}

<!-- Image slider -->
    <div id="slides"  class="carousel slide" data-ride="carousel">
<ul class= "carousel-indicators">
  <li data-target= "#slides" data-slide-to= "0" class="active"></li>
    <li data-target= "#slides" data-slide-to= "1"></li>
      <li data-target= "#slides" data-slide-to= "2"></li>
</ul>
<div class="carousel-inner">
   <div class="carousel-item active">
  <img src="/home/susy/Desktop/GIT/vegan-/imagens/feijuca6.jpg">
  <div class="carousel-caption">
    <h1 class="display-2"> Have you ever tried?</h1>
    <h3> Discover the authentic flavour</h3>
    <br>
  <button type="button" class= "btn btn-outline-light btn-lg"> Click Here</button>
  </div>
    </div>
<div class="carousel-item">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/pudim.jpg">
</div>
<div class="carousel-item">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/meal.jpg">
</div>
</div>

The first is the CSS (I'm using CSS 3) and the second is the HTML. I'm also using Bootstrap 4.

Does anyone know what am I missing or doing wrong? Or how can I change the sizes to fit the carousel? Please.

score 1 · Answer 1 · edited Oct 09 '20 at 07:28

1

What I think you are searching for is adding class="d-block w-100" in your image tag.

edited Oct 09 '20 at 07:28

miile7

2,547
3
23
38

answered Oct 08 '20 at 11:34

JakobWl

21
4

score 1 · Answer 2 · answered Oct 08 '20 at 11:47

As per my knowledge use

    .carousel-inner img{
       max-width:100%;
       height: auto;
       display: block;
    }

instead of using

    .carousel-inner img{
 width:100%;
 height: 40%;
}

if you want absolute height you can specify height : 300px

    .carousel-inner img{
     max-width:100%;
     height: 300px;
     object-fit: cover;
object-position: center;
    }

How to fit fit carousel images? (HTML/CSS/Bootstrap4)

2 Answers2