How to control the image size in a bootstrap Carousel?

Asked

Viewed 831 times

0

HTML

<!--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 imagem">
          <img class="d-block w-100" src="static/img/aviao.png" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="static/img/aviao.png" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="static/img/aviao.png" alt="Third slide">
        </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>
<!--Fim do Carousel-->

CSS

html, body {
    margin: 0;
    padding: 0;
}

.imagem {
    height: 400px !impotant;
}
html5 css3 carousel

  • How to control the size? What exactly do you want to do and how do you want the image to respond?

  • Don’t worry, I’ve got it, thank you very much for your attention.

  • Cool, since you decided to consider posting the answer or delete the question, since it was solved without need of answer ;)

1 answer

1

HTML

<!--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" src="static/img/aviao.png" height="400px" !important alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="static/img/aviao.png" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="static/img/aviao.png" alt="Third slide">
        </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>
<!--Fim do Carousel-->

Just put height="400px" !important made me be able to control the size of the image inside the div.

Browser other questions tagged html5 css3 carousel

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