CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4bootstrap-carousel
user14301156
user14301156

Reputation:

How to make landscape and portrait images compeletely responsive and same height within carousel?

I have a bootstrap carousel which has portrait and landscape images inside.(Wide screen)

enter image description here

As you can see above,each image has different size.And carousel height automatically set to heighest image's height.This behavior is not what I want because in this case when I make window smaller,there are white spaces on the top and bottom of the image like below(mobile screen) enter image description here To avoid these gaps around images,in my opinion height of all images should be same and height of carousel should set to lowest height of image instead of highest.But I couldn't figure how to do that

Desired State(Both wide and mobile) enter image description here

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 100%;
  }
  
  div.carousel-item {
  background-size:contain;
  background-position:center center;
  background-repeat:no-repeat no-repeat;
  width:100%;
  height:100%;
  }
  </style>
</head>
<body>

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-image:url(https://hips.hearstapps.com/hmg-prod/amv-prod-cad-assets/images/14q3/612022/2015-ford-mustang-gt-instrumented-test-review-car-and-driver-photo-623408-s-original.jpg?fill=2:1&resize=1200:*);" alt="Los Angeles">
    </div>
    <div class="carousel-item" style="background-image:url(https://static.wixstatic.com/media/61eb8a_19b3e8eaa1d44c16b7954f0d0b1ffb15~mv2.jpg/v1/fill/w_530,h_796,al_c,q_90,usm_0.66_1.00_0.01/61eb8a_19b3e8eaa1d44c16b7954f0d0b1ffb15~mv2.webp);" alt="Chicago">
    </div>
    <div class="carousel-item" style="background-image:url(https://www.canon.com.tr/media/PCA%20Exercise%20-%20Landscape%20Photography%20exercise-landscape-photos-opener-05_1200%20x%20400_tcm123-1444470.jpg);" alt="New York">
    </div>
  </div>
  
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

</body>
</html>

Upvotes: 2

Views: 2452

Answers (1)

koder613
koder613

Reputation: 1576

I ran your code but nothing was being displayed, so I created a new div within each carousel-item and applied some CSS styling to it to fit your requirements. However for the narrow image, I just used an img tag.

Is this what you desired: https://www.codeply.com/p/BLEXWO5Dhq?

        .att2 {
            background-size: cover;
            height: 400px;
            width: auto;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }
     <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

</head>

<body>  
       <div class="container">
       <div class="row">
            <div class="col">
                <div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active" >
                            <div class="att2" style="background-image: url('https://www.canon.com.tr/media/PCA%20Exercise%20-%20Landscape%20Photography%20exercise-landscape-photos-opener-05_1200%20x%20400_tcm123-1444470.jpg')"></div>
                        </div>
                        <div class="carousel-item" >
                            <img src="https://static.wixstatic.com/media/61eb8a_19b3e8eaa1d44c16b7954f0d0b1ffb15~mv2.jpg/v1/fill/w_530,h_796,al_c,q_90,usm_0.66_1.00_0.01/61eb8a_19b3e8eaa1d44c16b7954f0d0b1ffb15~mv2.webp"
                            class="d-block" alt="..." style="margin: auto; height: 400px;">
                            <!-- <div class="att2-x" style="background-image: url('https://static.wixstatic.com/media/61eb8a_19b3e8eaa1d44c16b7954f0d0b1ffb15~mv2.jpg/v1/fill/w_530,h_796,al_c,q_90,usm_0.66_1.00_0.01/61eb8a_19b3e8eaa1d44c16b7954f0d0b1ffb15~mv2.webp')"></div> -->
                        </div>
                        <div class="carousel-item" >
                            <div class="att2" style="background-image: url('https://hips.hearstapps.com/hmg-prod/amv-prod-cad-assets/images/14q3/612022/2015-ford-mustang-gt-instrumented-test-review-car-and-driver-photo-623408-s-original.jpg');"></div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators1" 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="#carouselExampleIndicators1" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </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/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>

Upvotes: 1

Related Questions