Full with image in a max width content column

Readme.markdown

Allow any element to expand beyond the width of its parent container to fill the width of the browser window using vw and calc(). This is especially useful with images. Check out the Codepen demo.

This code is licensed under the MIT License.

index.html

<article>
  <p>Bacon ipsum dolor sit amet t-bone flank bacon short ribs tri-tip ribeye spare ribs chicken leberkas. Landjaeger doner tail spare ribs tenderloin boudin prosciutto flank shankle ball tip short ribs bacon shank venison. Pork chop prosciutto cow doner, turkey jerky filet mignon beef ribs short ribs ball tip brisket ham pastrami kielbasa. Chuck brisket pork belly shoulder.</p>

  <p>Kielbasa bacon boudin swine cow tri-tip shankle. Ham hock flank landjaeger porchetta, strip steak t-bone short loin beef chuck tri-tip kielbasa bresaola prosciutto hamburger bacon. Cow t-bone bresaola, swine ham bacon shankle ground round. Turkey pancetta sirloin, beef spare ribs boudin biltong pork frankfurter meatloaf jerky meatball bacon porchetta jowl.</p>

  <div class='full-width'>
    <img src="http://f.cl.ly/items/1v1E170h0a2c1U1c1I2o/panorama.jpg">
  </div>

  <p>Bacon ipsum dolor sit amet t-bone flank bacon short ribs tri-tip ribeye spare ribs chicken leberkas. Landjaeger doner tail spare ribs tenderloin boudin prosciutto flank shankle ball tip short ribs bacon shank venison. Pork chop prosciutto cow doner, turkey jerky filet mignon beef ribs short ribs ball tip brisket ham pastrami kielbasa. Chuck brisket pork belly shoulder.</p>

  <p>Kielbasa bacon boudin swine cow tri-tip shankle. Ham hock flank landjaeger porchetta, strip steak t-bone short loin beef chuck tri-tip kielbasa bresaola prosciutto hamburger bacon. Cow t-bone bresaola, swine ham bacon shankle ground round. Turkey pancetta sirloin, beef spare ribs boudin biltong pork frankfurter meatloaf jerky meatball bacon porchetta jowl.</p>
</article>

style.scss

$max-width: 45rem;

article {
  max-width: $max-width;
  margin-left: auto;
  margin-right: auto;
}

@media all and (min-width:$max-width) {
  .full-width {
    @supports(width:100vw) {
      width: 100vw;
      transform: translateX(calc((#{$max-width} - 100vw)/2));
    }
  }
}


img { max-width: 100%; }