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
This horizontal scroll for alignfull elements were driving me crazy and that solution helped me to figure it out. Thank you so much !
awesome
Thanks, this is cool.
Any idea how you could have a full width background image like you have but with text inside the div that is contrained like the other text to the fixed container?
I love this post and thank you for the demo! Another alternative to get rid of the scrollbars is to hide them with CSS instead of hiding overflow. Hiding the overflow does cut off the image slightly, so if that’s a problem you can use…
html { scrollbar-width: none }
::-webkit-scrollbar { display: none }
Thanks again for the post!
…oh and if you’re going to do that then you can actually set the
{ max-width: 100vw }