How to set an image 100% width (of the page), inside a container in Bootstrap?

Question

I have an image inside a (Bootstrap) container and I want the image to be 100% width of the page. I can't take it outside of the container and I can't take away the padding of the container (because of the texts around the image).

I found that I could give the image position: absolute, but I have subtitles ON the image, and when I do that the subtitles won't be on top of it anymore.

Are there any other solutions to force the image to "ignore" the padding of the container it is inside?

Edit:

.cooking {
 width: 421px;
 border: 0px solid;
 border-color: #779a0b;
 border-top-width: 20px;
 margin-top: 8px;
}

@media(max-width: 768px){
 .cooking {
  margin-left: -15px;
  margin-right: 15px;
  width: 787px;
 }
}

<div class="container">
  <div class="row">
    <div class="col-md-7">
      <p>
      some text
      </p>
    </div>
    <div class="col-md-5 test">
      <img src="img/studenten-breiter.jpg" alt="Studenten beim Kochen" class="img-responsive cooking">
      <div class="img-titel">
        <p>
        subtitles
        </p>
      </div>
    </div>
  </div>
  <--! some more stuff -->
</div>

sharing your code as snippet would help us answer your question — Imran Ali, Sep 06 '17 at 12:12
Please add your code to the question. You can set the image width to `100vw` and then adjust with negative margins but that's just hacky. You most likely need to reorganize your html. — I haz kode, Sep 06 '17 at 12:15
I shared the important part of the code, but as it's only a part of it you can't run it ofc. I hope that's enough, I can't share all of it. @I haz kode I tried that but it doesn't work. As you can see in the snippet now, I already tried to make the image big and put `margin-left: -15px`, but I can't get rid of the space on the right. — kreakiwi, Sep 06 '17 at 12:44
I think you're missing a CSS reset, the space on the right side of the screen is the default `padding` for the `` tag which you need to reset. https://jsfiddle.net/s55k4vy4/ — I haz kode, Sep 06 '17 at 13:01
Related - https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen — Paulie_D, Sep 06 '17 at 13:13
Also - https://stackoverflow.com/questions/24344261/how-to-have-a-100-width-background-inside-container-of-twitter-bootstrap?rq=1 — Paulie_D, Sep 06 '17 at 13:14
@I haz kode the body doesn't have a padding (checked it again), but I can see that the padding is from the container. I can also remove it, but then the whole container has no padding, I only want to remove it from the image. — kreakiwi, Sep 06 '17 at 13:42

score 0 · Answer 1 · answered Sep 06 '17 at 13:24

0

I am answering your question about 'image to be 100% width of the page'.

You have included your image inside <div class="col-md-5">which means image will occupy only 5 parts of the 12 parts of grid system for medium screens ,it will not occupy 100% of the page width.

please see Bootstrap grid system

also, you have given fixed value for width of image<img class="cooking"> having {width: 421px}.

Please change the {width:100%;}for <div class="cooking"> and include your image inside <div class="col-md-12"to occupy full width of page.

answered Sep 06 '17 at 13:24

gaurangmarulkar

19
4

`col-md-5` is right as I only want 100% width for small devices. I forgot to mention that, since I didn't plan to show my code in the beginning. About the fixed value, I forgot to change that. I had it on 100% first but I tried to make it really big. The problem is a padding from the container, not any of my settings. And I'm asking if there's a way to force the image full width without removing the padding from the container. – kreakiwi Sep 06 '17 at 13:38

score 0 · Answer 2 · answered Nov 19 '21 at 07:41

This must work:

class: alignfull and class: img-fluid will do the magic.

    <div class="alignfull">
                          
         <img class="img-fluid" style="background-size: cover;
                                       background-position: center; 
                                       background-repeat: no-repeat;
                                       height: auto;
                                       min-width: 100%; 
                                       width: -moz-available;" 
         src="{{ $image->image }}" alt="An image">

   </div>

How to set an image 100% width (of the page), inside a container in Bootstrap?

2 Answers2