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.

Solution 1

Check if this solves the problem:

<div class="container-fluid no-padding">
  <div class="row">
    <div class="col-md-12">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
    </div>
  </div>
</div>

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

<div class="container-fluid px-0">
  <div class="row">
    <div class="col-md-12">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
    </div>
   </div>
</div>

Updated example here.

Solution 2

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

Solution 3

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.

 <div class="container-fluid px-0">
        <div class="row mx-0">
            <div class="col-12 px-0">
            <img src="images/top.jpg" class="img-fluid w-100">
            </div>
        </div>
    </div>

Solution 4

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.

<div class="container-fluid w-100 h-auto m-0 p-0">  

    <img src="someimg.jpg" class="img-fluid w-100 h-auto p-0 m-0" alt="Patience">           

</div>

Solution 5

container class has 15px left & right padding, so if you want to remove this padding, use following, because row class has -15px left & right margin.

<div class="container">
  <div class="row">
     <img class='img-responsive' src="#" alt="" />
  </div>
</div>

Codepen: http://codepen.io/m-dehghani/pen/jqeKgv

View more solutions

Comments

[stradled]

Surely this is correct answer, if you were to follow bootstraps simple grid rules instead of hacking it with overrides.

[jared]

This is the most Bootstrappy answer imho. But one issue is that it causes scrollbars.

[Pawel]

In Bootstrap 4 you can use the class px-0 which stands for padding-left: 0; padding-right: 0;. Reference

[Marco Sanchez]

Actually the most appropriate would be class="container-fluid p-0"

[Giorgio Tempesta]

I would avoid hacking the normal flow of classes in Bootstrap (always insert a .col inside a .row) . Removing the padding from either the container or the columns seems like a better approach. Another option would be to completely remove all of the bootstrap classes (.container, .row and .col) and then open a .container on the next section.

[Mehdi Dehghani]

Removing the padding using css just add some unnecessary code and overload to the page, there is no benefit overwriting padding over my solution, if there is any, please let me know. (there is nothing wrong with using .row without .col, if your designer want to, using .col without .row is wrong tho, because of float) also removing .container is not possible, because you add .container class because you want to design boxed-view. without .container there is no limit on width, unless you define your container, e.g: my-container, which is wrong and unnecessary.

[Giorgio Tempesta]

I didn't suggest to insert a .col without a .row, in fact what I meant was to stick to the .container > .row > .col structure as much as you can. If you feel confident in not inserting a .col inside a .row of course you can do it and maybe you won't have any problem, but in my experience it's better to avoid it in order to be able to change the structure in the future if you need to.

[Mehdi Dehghani]

I know you didn't suggest to insert a .col without a .row, I added that info for making my comment more useful (hopefully). and yes, your solution works too, actually the accepted answer is similar to your solution, about flexibility, it depends, editing css over editing html (in order to change the structure, as you mentioned) is not always easier, I think the only advantage of my solution over yours is less html tag and css, that's all

[Yousef Altaf]

in bootstrap4 use img-fluid instead of img-responsive