Full Screen Width Image Inside Container

Images that appear wider than the text around them are a cool design technique. I do a lot of work with Bootstrap and unfortunately, I’ve found that getting this to work usually ends up with markup that leaves me unsatisfied – at least until now.

Full Width Image Outside of Container

How I’ve traditionally accomplished this effect.

 <div class="container">
      <div class="row">
           <div class="col-sm-12">
               <p>Lorem ipsum dolor sit amet...</p>
           </div>
      </div>
 </div>

 <img class="img-fluid" src="images/super-wide.jpg" alt="Super Wide Highway Picture.">

 <div class="container">
      <div class="row">
           <div class="col-sm-12">
               <p>Inani oblique detracto pro et...</p>
           </div>
      </div>
 </div>

Full Width Image Inside of Container

What I would really prefer is something like the following, where instead of closing and re-opening the col, row, and container elements, we use a class to make the image take up the full-area.

 <div class="container">
      <div class="row">
           <div class="col-sm-12">

                <p>Lorem ipsum dolor sit amet...</p>

                <div class="alignfull">
                    <img class="img-fluid" src="images/super-wide.jpg" alt="Super Wide Highway Picture.">
                </div>

                <p>Inani oblique detracto pro et...</p>

           </div>
      </div>
 </div>

Coincidentally, this is the same markup generated by the alignfull image alignment available in the new block-based WordPress editor.

Making Align Full Work

Bill Erickson has some great material on Getting your theme ready for Gutenberg (the new WordPress editor), which provided me with the following markup.

.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 1000%;
    width: auto;
}

This takes advantage of the CSS calc() function and viewport units (vw).

This looks great right up until your content gets tall enough that a vertical scroll bar appears, at which time you also get a horizontal scroll bar – ugh.

On my business website, I’ve previously written about How to Remove a Horizontal Scrollbar but this is a new problem.

I haven’t found a solution I love for this issue but I have found one I can live with. By wrapping the entire markup in a new div (fortunately, I was working with Genesis, which already has a div.site-container wrapping the whole page) and setting the new div to overflow: hidden;.

My CSS

.site-container {
    overflow: hidden;
}

.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 1000%;
    width: auto;
}

My Markup

<div class="site-container">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">

                <p>Lorem ipsum dolor sit amet...</p>

                <div class="alignfull">
                    <img class="img-fluid" src="images/super-wide.jpg" alt="Super Wide Highway Picture.">
                </div>

                <p>Inani oblique detracto pro et...</p>

            </div>
        </div>
    </div>
</div>

Demo

See my Full Screen Width Image Inside Container Demo

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.