title: How to make landscape and portrait images compeletely responsive and same height within carousel?
body: <p>I have a bootstrap carousel which has portrait and landscape images inside.(Wide screen)</p>
  <p><a href="https://i.stack.imgur.com/UKLNB.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UKLNB.gif" alt="enter image description here" /></a></p>
  <p>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)
  <a href="https://i.stack.imgur.com/EXsBf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EXsBf.png" alt="enter image description here" /></a>
  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</p>
  <p><strong>Desired State</strong>(Both wide and mobile)
  <a href="https://i.stack.imgur.com/ze2S3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ze2S3.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
    /* 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%;
    }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="demo" class="carousel slide" data-ride="carousel"&gt;
  
    &lt;!-- Indicators --&gt;
    &lt;ul class="carousel-indicators"&gt;
      &lt;li data-target="#demo" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#demo" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#demo" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ul&gt;
    
    &lt;!-- The slideshow --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;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&amp;resize=1200:*);" alt="Los Angeles"&gt;
      &lt;/div&gt;
      &lt;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"&gt;
      &lt;/div&gt;
      &lt;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"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;!-- Left and right controls --&gt;
    &lt;a class="carousel-control-prev" href="#demo" data-slide="prev"&gt;
      &lt;span class="carousel-control-prev-icon"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="carousel-control-next" href="#demo" data-slide="next"&gt;
      &lt;span class="carousel-control-next-icon"&gt;&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>