Stretch image to fit full container width bootstrap

Question

I have an image that's 1300px wide, using bootstrap I want this image to fill the full width of my container which is set to 1300px. I create a row, give it a full 12 columns and then add in the image with a class of image responsive. With this set up I get the output below.

I want my image to stretch all the way along to where my image is in my content, here is my code.

  <div class="row">     <div class="container">       <div class="col-md-12">         <img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/>       </div>     </div>   </div> 

The image is set to width 100% so not sure why it isn't filling the container.

Answer 1

In bootstrap 4.1, the w-100 class is required along with img-fluid for images smaller than the page to be stretched:

<div class="container">   <div class="row">     <img class='img-fluid w-100' src="#" alt="" />   </div> </div> 

see closed issue: https://github.com/twbs/bootstrap/issues/20830

(As of 2018-04-20, the documentation is wrong: https://getbootstrap.com/docs/4.1/content/images/ says that img-fluid applies max-width: 100%; height: auto;" but img-fluid does not resolve the issue, and neither does manually adding those style attributes with or without bootstrap classes on the img tag.)