'How to fully fit an image inside carousel(Bootstrap)

I have made a fully functional carousel but the problem is that on the right side of carousel white block is appearing. I want to ged rid of that. Please help.

Example

<div class="carousel-inner">
  <div class="item active">
    <img src="Jellyfish.jpg" alt="image">
    <div class="carousel-caption">
      <h2>This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
  <div class="item">
    <img src="Koala.jpg" alt="image">
    <div class="carousel-caption">
      <h2 style="color:orange">This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
  <div class="item">
    <img src="Penguins.jpg" alt="image">
    <div class="carousel-caption">
      <h2>This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
    <a href="#caro" class="left carousel-control" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#caro" class="right carousel-control" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

htmlcsstwitter-bootstraptwitter-bootstrap-3


Solution 1:[1]

Set Image width:100%

.item img {
  width:100%
}

Here is Demo: https://jsfiddle.net/u9kkdLzb/

Solution 2:[2]

in your css set image width:100%

.carousel-inner>.item>img, .carousel-inner>.item>a>img {
        display: block;
        height: auto;
        max-width: 100%;
        line-height: 1;
        margin:auto;
        width: 100%; // Add this
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="carousel-inner">
  <div class="item active">
    <img src="Jellyfish.jpg" alt="image">
    <div class="carousel-caption">
      <h2>This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
  <div class="item">
    <img src="Koala.jpg" alt="image">
    <div class="carousel-caption">
      <h2 style="color:orange">This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
  <div class="item">
    <img src="Penguins.jpg" alt="image">
    <div class="carousel-caption">
      <h2>This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
    <a href="#caro" class="left carousel-control" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#caro" class="right carousel-control" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

Solution 3:[3]

Theres also an easy way to implement this right in the carousel html structure. Every time you insert an img as an item, while still being inside the tag, add style="width: 100%". so it would look something like this.

<div class="item active">
    <img src="img1.jpg" style="width: 100%">
</div>

<div class="item">
    <img src="img2.jpg" style="width: 100%">
</div>

<div class="item">
    <img src="img3.jpg" style="width: 100%">
</div>

Solution 4:[4]

I just encountered this problem with a project. There are ways to fiddle with the image size via css but you will most likely end up with undesirable results such as squished or stretched looking images.

1 method is to use a div with a specified size, use css to set the image as a background image for the div and set background-size to fit, contain or cover.

2 A better approach is to use an image manipulation program like photoshop, i personally use an online application called https://www.photopea.com. Is is basically a free online version of photoshop. Just edit the image size and DPI and it will help retain a more correct aspect-ratio.

Solution 5:[5]

<img src="~/images/IMAGE.jpg" alt="Important IMAGE" class="container-fluid" />

Use .container-fluid for a full width container, spanning the entire width of your viewport. Please note images still need to be sized well before adding to your site, its good practice.

Solution 6:[6]

this seems to work for modern browsers. Works with bootstrap 5. Height can be set to any value

#myCarousel .carousel-item img {
    object-fit: cover;
    object-position: center;
    height: 100vh;
    overflow: hidden;
}

source is: https://raybo.org/posts/2021-03-27-consistent-height-carousels-with-css-gradients-by-hacking-the-bootstrap-5-carousel/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Minal Chauhan
Solution 2 Shimnas
Solution 3 MaxiGui
Solution 4 d0rf47
Solution 5 Amir Dora.
Solution 6 AShah

Related Questions