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       lt div class  row  gt       lt div class  container  gt         lt div class  col-md-12  gt           lt img src   lt  php bloginfo  template directory      gt  assets img homeBanner jpg  alt  placeholder 960  class  img-responsive   gt         lt  div gt       lt  div gt     lt  div gt    The image is set to width 100  so not sure why it isn t filling the container

User · Answer

container class has 15px left  amp  right padding  so if you want to remove this padding  use following  because row class has -15px left  amp  right margin    lt div class  container  gt     lt div class  row  gt        lt img class  img-responsive  src     alt      gt     lt  div gt   lt  div gt    Codepen  http   codepen io m-dehghani pen jqeKgv

User · Answer

In bootstrap 4 1  the w-100 class is required along with img-fluid for images smaller than the page to be stretched    lt div class  container  gt     lt div class  row  gt       lt img class  img-fluid w-100  src     alt      gt     lt  div gt   lt  div gt    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

User · Answer

Here s what worked for me  Note  Adding the image within a row introduces some space so I ve intentionally used only a div to encapsulate the image    lt div class  container-fluid w-100 h-auto m-0 p-0  gt          lt img src  someimg jpg  class  img-fluid w-100 h-auto p-0 m-0  alt  Patience  gt               lt  div gt

User · Answer

This will do the same as many of the other answers  but will make sides flush with the window  so there is no scroll bars   lt div class  quot container-fluid quot  gt     lt div class  quot row quot  gt       lt div class  quot col quot  style  quot padding  0  quot  gt          lt img src  quot example jpg quot  class  quot img-responsive quot  alt  quot Example quot  gt         lt  div gt     lt  div gt   lt  div gt

User · Answer

First of all if the size of the image is smaller than the container  then only  img-fluid  class will not solve your problem  you have to set the width of image to 100   for that you can use Bootstrap class  w-100   keep in mind that  container-fluid  and  col-12  class sets left and right padding to 15px and  row  class sets left and right margin to  -15px  by default   make sure to set them to 0   Note   px-0  is a bootstrap class which sets left and right padding to 0 and  mx-0  is a bootstrap class which sets left and right margin to 0   P S  i am using Bootstrap 4 0 version      lt div class  container-fluid px-0  gt           lt div class  row mx-0  gt               lt div class  col-12 px-0  gt               lt img src  images top jpg  class  img-fluid w-100  gt               lt  div gt           lt  div gt       lt  div gt

User · Answer

Check if this solves the problem    lt div class  container-fluid no-padding  gt     lt div class  row  gt       lt div class  col-md-12  gt         lt img src  https   placeholdit imgix net  text txtsize 33 amp txt 1300 C3 97400 amp w 1300 amp h 400  alt  placeholder 960  class  img-responsive    gt       lt  div gt     lt  div gt   lt  div gt    CSS   no-padding     padding-left  0    padding-right  0      Css class no-padding will override default bootstrap container padding   Full example here      Update If you use bootstrap 4 it could be done even simpler   lt div class  container-fluid px-0  gt     lt div class  row  gt       lt div class  col-md-12  gt         lt img src  https   placeholdit imgix net  text txtsize 33 amp txt 1300 C3 97400 amp w 1300 amp h 400  alt  placeholder 960  class  img-responsive    gt       lt  div gt      lt  div gt   lt  div gt    Updated example here

[html] Stretch image to fit full container width bootstrap

Examples related to html

Examples related to css

Examples related to image

Examples related to twitter-bootstrap