Make images in bootstrap carousel responsive?

Question

I'm making a carrousel with the bootstrap, but I can not make the images responsive. The problem is the images that have a height well greater than the width? I tested another image with a larger width and the image is distorted.

 body { padding-top: 68px !important; background-color: black; }

 <!DOCTYPE html> <html lang="en"> <head> <title>Teste</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> </head> <body> <nav class="navbar navbar-expand-md fixed-top navbar-dark"> <div class="container"> <a href="index.html" class="navbar-brand"> <img src="#" alt="Logo"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-content"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link pr-5 nav-active" href="#">TESTE</a></li> <li class="nav-item"><a class="nav-link pr-5" href="#">TESTE</a></li> </ul> </div> </div> </nav> <header class="container-fluid p-0"> <div id="carouselBanner" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <a href="top-movie.html"><img class="d-block w-100" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/rPdtLWNsZmAtoZl9PK7S2wE3qiS.jpg" alt="Fight Club"></a> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/yE5d3BUhE8hCnkMUJOo1QDoOGNz.jpg" alt="House"> </div> </div> <a class="carousel-control-prev" href="#carouselBanner" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" ></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselBanner" data-slide="next"> <span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span> </a> </div> </header> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>

The carousel takes the whole height of the image, I tried to decrease the height, but the images are distorted.

Answer 1

I tried to put some styling on your css,

<style>
    body {
    padding-top: 68px !important;
    background-color: black;
}

.carousel-inner {
   position: relative;
   overflow: hidden;
}

.carousel-item {
  position: relative;
  width: 100vh;
  height: 100vh;
  display: none;
  width: 100%;
}


.img {

     height: 100%;
     width: 100%;
     background-repeat: no-repeat;
     background-attachment: fixed !important;
     background-size: cover !important;   
     background-position: center !important;
    }

      </style>

It scales down, when I minimize it

Make images in bootstrap carousel responsive?

Question

1 answers

solution1
0 2019-07-21 13:44:31

Make images in bootstrap carousel responsive?

Question

1 answers

solution1 0 2019-07-21 13:44:31

solution1
0 2019-07-21 13:44:31