CODEWITHSUNDEEP
htmlcssimagecarouselresponsive
Jason A
Jason A

Reputation: 53

Having trouble making regular image and images in Carousel Bootstrap responsive

I'm having difficulty making my regular image and images in Carousel Bootstrap responsive. After searching for an answer, I already tried making max-width: 100%, height: auto, display: block and vice-versa, but I still cannot make the images responsive...Not exactly sure what the problem is....Thank you in advance.

Here is my HTML:

  </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block" src="testing.JPG" alt="First slide">
            <p>October, 2020. McDonald's at Main St.</p>
          </div>
          <div class="carousel-item">
            <img class="d-block" src="statute.JPG" alt="Second slide">
            <p>June, 2020. Kelowna, BC.</p>
          </div>
          <div class="carousel-item">
            <img class="d-block" src="trees.JPG" alt="Third slide">
            <p>November, 2020. Bute St., BC.</p>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
    <div class = "main_car">
        <img src="main_car.jpg" alt="car">
        <p>June, 2020. Sunshine Coast, BC, Canada </p>
    </div>

Here is my CSS:

.carousel-inner img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-height: 530px;
}

.carousel-inner p {
    text-align: center;
    color: white;
    font-size: 14px;
}

.main_car {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

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

Upvotes: 0

Views: 69

Answers (2)

rensothearin
rensothearin

Reputation: 756

Add class="img-fluid" to your <img> tag

And add CSS to:

.carousel-inner img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /** new style */
    max-width: 100%;
    height: auto;
}

Upvotes: 1

Tom_Ra
Tom_Ra

Reputation: 133

you can set the image width to vw (view width) so when the screen gets smaller it adjusts. of course the height will change as well:

carousel-inner img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
    max-height: 530px;
}

Upvotes: 0

Related Questions