Full-width images inside a padded container

Sometimes the most simple CSS layout rules are the most challenging.

I recently needed to make an image inside a padded container full-width.  Easy enough, right?  Just wrap the image in a div with negative margins equal to the padding.  Gawker sites like Jezebel do a lovely job of this by adding a “fullwidth-for-small” CSS class which triggers on smaller screens.

See the Pen emzQoM by Andrew J. Holden (@holdencreative) on CodePen.

But what if you don’t have access to modify the HTML? After some trial and error I created a solution using CSS3’s calc and vw properties.

See the Pen raLoyQ by Andrew J. Holden (@holdencreative) on CodePen.

The CSS calc() and viewport properties certainly present some interesting opportunities for cases where hacks using position:absolute would have been the only recourse in the past.   This method isn’t exactly elegant, but it works, and I’m sure it could be improved.

Leave a Reply

Your email address will not be published. Required fields are marked *