Stretch and fill image in Bootstrap carousel

Question

Hi guys 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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

1. 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" />

2. Add this style

   .active img{
     width: 100%;
   }
   

Answer 5

.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

Answer 6

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