How to fit portrait image into bootstrap carousel with landscape ones?

Question

I have a bootstrap carousel example with 2 landscape(width is greater than height) and 1 portrait(height is greater than width)images. Since the portrait one is taller than others, it causes overflow like below

Landscape one

Portrait one

I want that portait one to be seem like below(fit into container as same as others and centered) Besides my carousel works responsively therefore

 .carousel-inner img {
    width: 100%;
    height: 100%;
  }

needed

<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%;
  }
  </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">
      <img src="https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym" alt="Los Angeles">
    </div>
    <div class="carousel-item">
      <img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg" alt="Chicago">
    </div>
    <div class="carousel-item">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU" 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>

A Haworth · Answer 1 · 2020-09-20T20:55:56.733

0

If instead of img you put the image as background-image to its containing div the system will automatically resize and position things so they fit as you want - and if the user resizes the window the images will resize accordingly (at the moment the images get 'squished' if the window is narrowed).

The CSS for the div containing the image can have this added:

  div.carousel-item {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat no-repeat;
    width: 100%;
    height: 100%;
  }

and this

<div class="carousel-item">
  <img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg" alt="Chicago">
</div>

becomes

<div class="carousel-item" style="background-image="url(https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg);">
</div>

Here's the complete code which is working on my Window 10 laptop:

<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://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym);" alt="Los Angeles">
    </div>
    <div class="carousel-item" style="background-image:url(https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg);" alt="Chicago">
    </div>
    <div class="carousel-item" style="background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU);" 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>

edited Sep 20 '20 at 20:55

answered Sep 20 '20 at 20:34

A Haworth

30,908
4
11
14

well then , how can be this a answer ? suggestions can be put in comments – Sandrin Joy Sep 20 '20 at 20:44
@Sandrin Joy I'm sorry I don't understand your comment. If the alterations I have shown are made the carousel works as the question requested - portrait images being not overflowing and centred. – A Haworth Sep 20 '20 at 20:47
I applied your changes but didnt work.Could u come up with fiddle? – Sep 20 '20 at 20:49
I've put the complete code at the end of the answer. It is working on my Windows10 laptop. I'll try it on some other devices too. What browser/system are you using - I'll try to track down any problems. – A Haworth Sep 20 '20 at 20:57
I have also put the code on my webspace - let me know whether it works for you. It's at [link]http://ahweb.org.uk/testslider.html – A Haworth Sep 20 '20 at 21:00
@Sandrin Joy No imgs are being slid, only background-images so no need for img classes. Does the link I gave work for you? – A Haworth Sep 20 '20 at 21:06
@TimuçinÇiçek am almost done with image classes. Please kindly respond – Sandrin Joy Sep 20 '20 at 21:06
I've now tested on Android (Samsung Galaxy) Chrome, iPad (IOS13) Safari, Windows 10 Edge, Firefox, Chrome, Internet Explorer 11 and they all work fine. – A Haworth Sep 20 '20 at 21:09
@AHaworth check out my answer – Sandrin Joy Sep 20 '20 at 21:17
Have now tested on ancient iPad (IOS/Safari 9) and it works OK. – A Haworth Sep 20 '20 at 21:17
@AHaworth how can i explain you. Background image and tags are both diferent. Their puposes are different. https://buildawesomewebsites.com/html-img-vs-css-background-image/ – Sandrin Joy Sep 20 '20 at 21:28
@AHaworth good solution.But isn't there another way to fill the screen only for the lanscape ones? – Sep 20 '20 at 21:53
@Timuçin Çiçek sorry I don't understand, the landscape ones are filling the screen as much as they can while maintaining their aspect ratios (white car is 2.35:1 and yellow 1.66:1) and neither are the same ratio as any of my screens. If they are the same they will fill the screen, if not then they can't all fill the screen without some distortion or cropping. If you don't mind losing some of the image then background-size:cover will automatically crop. see [link]http://ahweb.org.uk/testslidercover but what should happen if the user is on a device in portrait orientation?. – A Haworth Sep 21 '20 at 05:12
I have put up a webpage where you can test the effects of adding different styling for the sizing of the images shown. The choices can depend on whether the image is itself landscape or portrait and whether the window is landscape or portrait. See [link]http://ahweb.org.uk/testsliderchoice.html (if you want portrait photos to be treated differently from landscape in the last two options for portrait photos, add class portrait to the carousel-item. - in your case it won't be necessary - the options are just there to make a complete demo). One of your photos is missing, I've used my own instead. – A Haworth Sep 22 '20 at 10:08

Sandrin Joy · Answer 2 · 2020-09-20T21:26:36.230

I have centered the 2nd image without scaling using

.mx-auto .d-block bootstrap classes

for the other 2 images , i did a full scale

using `.w-100 class` & `height:100vh`

here height is your required carousal height.

this is what i understood from your required output.

  .carousel-inner img {
      width: auto;
      height: 100vh;
  }
  .carousel
  {
    height: 100vh;
    width: 100vw;
  }

<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>
 
</head>
<body>
<div  class="carousel slide bg-dark" id="mine" data-ride="carousel">
                     <ul class="carousel-indicators">
    <li data-target="#mine" data-slide-to="0" class="active"></li>
    <li data-target="#mine" data-slide-to="1"></li>
    <li data-target="#mine" data-slide-to="2"></li>
  </ul>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                                <img src="https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym"  class="img-fluid w-100">
                                
                    </div>
                    <div class="carousel-item">
                                <img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg "  class="img-fluid mx-auto d-block">

                    </div>
                    <div class="carousel-item">
                                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU"  class="img-fluid w-100">

                    
                    </div>
                </div>
                <a class="carousel-control-next" href="#mine" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
                <a class="carousel-control-prev" href="#mine" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
            </div>
</body>
</html>

I suggest to go for centering all the images as the 2nd one . Since streching won't look good

.carousel-inner img {
      width: auto;
      height: 100vh;
  }
  .carousel
  {
  
    height: 100vh;
    width: 100vw;
  }

<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>
 
</head>
<body>
<div  class="carousel slide" id="mine" data-ride="carousel">
                     <ul class="carousel-indicators">
    <li data-target="#mine" data-slide-to="0" class="active"></li>
    <li data-target="#mine" data-slide-to="1"></li>
    <li data-target="#mine" data-slide-to="2"></li>
  </ul>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                                <img src="https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym"  class="img-fluid mx-auto d-block">
                                
                    </div>
                    <div class="carousel-item">
                                <img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg "  class="img-fluid mx-auto d-block">

                    </div>
                    <div class="carousel-item">
                                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU"  class="img-fluid mx-auto d-block">

                    
                    </div>
                </div>
                <a class="carousel-control-next" href="#mine" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
                <a class="carousel-control-prev" href="#mine" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
            </div>
</body>
</html>

But i suggest to go for all images to be centered like the 2nd one and make the left out portion transparent, because stretching never looks good. — Sandrin Joy, Sep 20 '20 at 21:22
Unfortunately this 'squishes' the images if the window size is not of the images initial aspect ratio. So for example., the yellow car looks too long and thin on the little snippet window. This means that if for example the user changes the window size on their browser the images get distorted (that's the good thing about background-image as opposed to img elements - the system automatically does the resizing for you to make the slider responsive across all devices. — A Haworth, Sep 20 '20 at 21:22
This works when the viewport is in landscape mode, but the images get 'squished' when it is in portrait (for example if the user is on a phone). This may or may not matter for this particular question but it matters if one is trying to have a fully responsive site. — A Haworth, Sep 22 '20 at 10:28

How to fit portrait image into bootstrap carousel with landscape ones?

2 Answers2