CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Bokch
Bokch

Reputation: 51

How to make my image full width with bootstrap 3

I can't seem to make this work, my image stays in the middle of the screen on desktop mode, even I removed the padding on .container-fluid it stays there in the middle, when I resize the browser it takes the full width, which I want, but not in desktop mode.

Here is the code 

<div class="container-fluid">
    <div class="row">
        <img src="img/imgBG.jpg" alt="BGDentist" class="img-responsive" />
    </div>
</div>

CSS

.img-responsive {
    vertical-align:middle;
    margin: 0 auto;
}

.container-fluid {
    overflow-x: hidden;
}

Upvotes: 2

Views: 3893

Answers (1)

hungerstar
hungerstar

Reputation: 21725

Without a verifiable example I'm going to guess it's because your image isn't large enough to expand into it's container at larger viewport sizes.

Your typical responsive image class looks like this:

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

The max-width property is what's limiting your image from expanding after a certain point. When set to 100% the max width the image will be what ever it's natural width is. If you have a 400px wide image, the image will expand/shrink when its container element is 400px or less. If the container is more than 400px it stops expanding.

The reason max-width: 100%; is used is to help keep your imagery sharp. You can use width: 100%; in place of max-width but your images will become blurry and pixelate once stretched beyond their native resolution.

Below is and example of what I believe you are experiencing. Below this example is another using width: 100%;.

.container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
img {
  display: block;
  height: auto;
  max-width: 100%;
}
<div class="container">
  <img src="http://placehold.it/600x200/">
</div>

<div class="container">
  <img src="http://placehold.it/1200x200/ff0">
</div>

Pixelates after container is larger than image's native 400px width.

.container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
img {
  display: block;
  height: auto;
  width: 100%;
}
<div class="container">
  <img src="http://placehold.it/400x200/">
</div>

Upvotes: 2

Related Questions