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 a

Answer 1

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 2

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

Answer 3

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

Answer 4

.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 5

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 6

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.