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

Question

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

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) 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)

<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>

have you tried wrapping the image in a div class and using an `object-fit` class like `contain` already? — tacoshy, Oct 07 '20 at 20:49
If the height of all images is to be the same what do you want to happen to images which are too wide for the available width? Should they just be cropped at the left and right sides? — A Haworth, Oct 07 '20 at 21:18
@AHaworth As I mentioned on desired state,too wide images should be small as same as portrait ones to keep height same — , Oct 08 '20 at 09:21
@koder613 almost.Problem on your solution is image cropping when its mobile.That large images are being cropped.Instead of that I want them to be scaled diagonally — , Oct 09 '20 at 12:43
@TimuçinÇiçek Is this better? https://www.codeply.com/p/BLEXWO5Dhq. I don't understand fully what you would like. Do you want different sized images to be able to be scaled but the same height? If so, it is inevitable that one image will be cropped in some way — koder613, Oct 09 '20 at 12:58
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_responsive check this example and see that image never gets cropped when u change the width of window.It resizes from all sides and protects the image.I expect this same behavior on ur solution — , Oct 09 '20 at 21:30

score 1 · Answer 1 · answered Oct 08 '20 at 19:55

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/popper.js@1.16.1/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>

See the snippet in full page mode to see results properly – koder613 Oct 08 '20 at 21:39 — koder613, Oct 08 '20 at 21:39

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

1 Answers1