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

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

and use the same CSS as above.