How to make the image responsive on mobile inside the Carrosel bootstrap 4, for it to adjust

Asked

Viewed 790 times

1

<div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="first-slide" src="images/website.jpg" alt="First slide">
            <div class="container">
              <div class="carousel-caption text-left">
                <h1>OPEN S.</h1>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a class="btn btn-lg btn btn-danger" href="#" role="button">Saiba Mais !</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img class="second-slide" src="images/business.jpg" style="height: 510px;" alt="Second slide">
            <div class="container">
              <div class="carousel-caption">
                <h1>Open S.</h1>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a class="btn btn-lg btn btn-danger" href="#" role="button">Saiba Mais !</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img class="img-fluid"  src="images/mine.png" width="1000" height="249" alt="Third slide">
            <div class="container">
              <div class="carousel-caption text-right">
                <h1>Open S</h1>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a class="btn btn-lg btn btn-danger" href="#" role="button">Saiba Mais !</a></p>
              </div>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

inserir a descrição da imagem aqui

  • What are the images?

  • I see here that each image has a different size: <img class="first-slide" src="images/website.jpg" alt="First slide">, <img class="second-slide" src="images/business.jpg" style="height: 510px;" alt="Second slide">, <img class="img-fluid" src="images/mine.png" width="1000" height="249" alt="Third slide">

  • 1

    To be responsive, either you put all images of the same size (no size reference) or remove all size references.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.