Stretch and fill image in Bootstrap carousel

Question

I am using bootstrap carousal and having some problem with image height and width. Even though I define it in the img attribute it still displays as original resolution. Following is the code I am using:

<div class="col-md-6 col-sm-6">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/650x450/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </div>
</div>

Here is demo of that.

What should I do to fill the image in a certain height and width regardless of its original resolution?

Matija Mrkaic · Answer 1 · 2017-02-20T16:51:21.803

12

You can use background-size: cover, while still having hidden <img> element for SEO and semantic purposes. Single img url is used both times, so there's no additional loading, and background-size is well supported (unlike object-fit which lacks support in IE, Edge and Android < 4.4.4).

Fiddle Demo

HTML change:

<div class="item" style="background-image: url(http://placehold.it/400x400);">
  <img src="http://placehold.it/400x400"/>
</div>

CSS change:

.carousel {
  /* any dimensions are fine, it can be responsive with max-width */
  width: 300px;
  height: 350px;
}

.carousel-inner {
  /* make sure your .items will get correct height */
  height: 100%;
}

.item {
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 100%;
}

.item img {
  visibility: hidden;
}

edited Feb 20 '17 at 16:51

answered Feb 20 '17 at 16:43

Matija Mrkaic

1,817
21
29

1

can you specify how to make it responsive on your response please ? – xavier Jun 21 '17 at 18:26
@xavier This is the responsive way to display image (eventually use `contain` instead of `cover`). Responsiveness of the whole carousel is not part of the question, still it is hinted already that you can use `max-width` to make it adaptable in width. – Matija Mrkaic Jun 24 '17 at 07:40

score 8 · Answer 2 · answered Feb 18 '17 at 22:42

You can place height in css and add !important because bootstrap is overriding your height with auto , and object-fit:cover; will work like background size cover a fiddle

.carousel{
  width:300px;
}
.item img{
  object-fit:cover;
  height:300px !important;
  width:350px;
}

score 5 · Answer 3 · answered Nov 13 '15 at 03:20

5

That you have width in placeholder should not matter, put this in your css and it should work, If it works you can try remove !important.

 .carousel img {
        width:100% !important;
        min-width:100 !important;
        height: auto;
    }

.img-responsive in bootstrap will just set the width to 100%, So in the case that the image original proportions are less than carousel width it will not fill it out.

answered Nov 13 '15 at 03:20

Mathias Asberg

3,562
6
30
46

i tried that but the problem is that it will use actual width of the image itself and i dont want that. I want the carousal height and width to be 300x350 and no matter what height or width image it is but fill in that carousal only – Mike Ross Nov 16 '15 at 01:35

plushyObject · Answer 4 · 2017-10-16T15:00:23.040

2

You're defining the size of your placeholders in the URL, not in the HTML attributes for the elements.

Also check out Bootstrap's .img-responsive class here.

Update

This has changed to .img-fluid in Bootstrap 4 Alpha and Beta

edited Oct 16 '17 at 15:00

answered Nov 13 '15 at 03:12

plushyObject

1,123
6
14

i think responsive image and defining height and width both doesnt work together. right – Mike Ross Nov 13 '15 at 03:33

score 2 · Answer 5 · answered Feb 17 '17 at 20:44

Make your image take up 100% of the container size. using height:100% and width:100%.

Then restrict the size by setting values of the container to desired size.

.item{
  height:300px;
  width:350px;
}
.item img{
  width:100%;
  height:100%;
}

I hope this helps.

score 2 · Answer 6 · answered Feb 17 '17 at 23:52

The carousel will grow to fit whatever the parent is by default, which in your case is .col-md-6 and .col-sm-6. If you want the carousel to be 300x300, style the carousel class/id or whatever to be the dimensions you want.

Then after that, bootstrap applies height: auto; to images in the carousel, which will override the height attribute you've specified in the HTML. 2 ways you can address that - either make the height (and for consistency sake, width, too) an inline style on the img tag if you want to keep it in the HTML, or apply the height to carousel images in your CSS file.

body {
    margin: 10px;
}
.carousel, .carousel img {
  width: 300px;
}
.carousel img {
  height: 300px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-md-6 col-sm-6">
  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://placehold.it/400x400">
      </div>
      <div class="item">
        <img src="http://placehold.it/350x450">
      </div>
      <div class="item">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="icon-next"></span>
    </a>
  </div>
</div>

This condensed the carousel to a thin column along the left edge of the browser window. It works in that thin window but... — mLstudent33, Jul 09 '20 at 06:45
but it only works if I set `width: auto;` and `height:auto;` — mLstudent33, Jul 09 '20 at 06:51
@mLstudent33 I would encourage you to review your usage of the downvote button - https://stackoverflow.com/help/privileges/vote-down. The answer is to the original question, and the answer shouldn't be downvoted because it doesn't work for your particular use case. — Michael Coker, Jul 09 '20 at 17:17

antelove · Answer 7 · 2019-05-30T05:23:23.973

img tag using "object-fit: cover" property

.carousel {
    height: 300px;
}

.carousel-inner {
    height: 100%;
}            

.item {
    width: 100%;
    height: 100%;                
}

.item img {
    object-fit: cover;
/*
    object-fit: fill;
    object-fit: none;
    object-fit: contain;
    object-fit: scale-down;
*/
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        
<div class="col-md-6 col-sm-6">

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

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">

            <div class="item active" >
              <img src="http://placehold.it/650x450/aaa&text=Item 1" style="width: 100%; height: 100%" />            
            </div>

            <div class="item" >
              <img src="http://placehold.it/350x350/aaa&text=Item 2" style="width: 100%; height: 100%" />            
            </div>

            <div class="item" >
              <img src="http://placehold.it/350x350/aaa&text=Item 3" style="width: 100%; height: 100%" />            
            </div>

        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>

    </div>

</div>

Codepen

Editor

Full view

Version of background .item

score 0 · Answer 8 · answered Feb 21 '17 at 06:03

0

Add this to the css of the file. This would restrict the height and width of the image and hence align it.

.item img { max-height: 300px; max-width: 350px; }

answered Feb 21 '17 at 06:03

Shalinee SIngh

199
8

Lucian · Answer 9 · 2017-02-22T12:55:19.853

if it's okay for you to use simple javaScript, here is the updated fiddle https://jsfiddle.net/a1x1dnaa/2/

what i have done is, used the image as background and removed the <img> tag.

jQuery(function(){
  var items = $('.item');
  items.each(function() {
    var item = $(this);
    img = item.find("img");
    img.each(function() {
        var thisImg = $(this);
        url = thisImg.attr('src');
        thisImg.parent().attr('style', 'background-image:url('+url+')');
        thisImg.remove();
    });
  });
});

then you can use some styles to make the image fill the div

.item {
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 200px; //you can use the height as you need 
}

this should work for you.

if you don't want to use javaScript, you can simply use the image as inline-style

<div class="item" style="background-image: url(http://placehold.it/400x400)"></div>

and use the same CSS as above.

score 0 · Answer 10 · edited Feb 21 '17 at 18:52

0

Add this class in every image attribute

class="img-responsive center-block"

For example:

<img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" class="img-responsive center-block" />

Add this style
```
.active img{
  width: 100%;
}
```

edited Feb 21 '17 at 18:52

depperm

10,606
4
43
67

answered Feb 21 '17 at 18:21

Gnanasekar S

1,820
14
15

score 0 · Answer 11 · answered Feb 21 '17 at 21:53

You can do that with the following styles:

.carousel-inner .item{
  width: 600px; /* Any width you want */
  height: 500px; /* Any width you want */
}
.carousel-inner .item img{
  min-width: 100%;
  min-height: 100%;
}

By setting min-* to the image attributes, we're making sure we have at least 100% of both width and height.

Updated JSFiddle

score 0 · Answer 12 · answered Feb 22 '17 at 13:10

0

.item img{
min-width: 300px;
min-height: 300px;
overflow: hidden;}
.item{
width: 300px;
height: 300px;
overflow: hidden;
}

you try this css and little change in html. i used different image src for better clearification.

here is updated fiddle

answered Feb 22 '17 at 13:10

Amit Kumar

304
1
8

score 0 · Answer 13 · edited May 30 '18 at 01:18

0

Try removing the styling from the img tag:

<!--from-->

<img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
<!--to-->
<img src="http://placehold.it/350x350/aaa&text=Item 3"/>

edited May 30 '18 at 01:18

Robert Columbia

6,313
15
32
40

answered May 30 '18 at 00:55

NanoCellMusic

1

score 0 · Answer 14 · answered Feb 20 '19 at 06:40

I faced the same problem. What worked for me is instead of using img, I used div and background-image for css

HTML:

<div class="carousel-inner">
  <div class="item active">
    <div class="carousel-img"></div>
  </div>
</div>

CSS:

.carousel-inner, .item {
    height: 100%;
}

.carousel-img {
    background-image: url('http://placehold.it/400x400');
    width: 100%;
    height:100%;
    background-position:center;
    background-size:cover;
}

Stretch and fill image in Bootstrap carousel

14 Answers14

Codepen

Linked