full viewport width image (container) inside article

full-viewport-width-image-container-inside-article.markdown

full viewport width image (container) inside article

elements like images (or containers) break out from inside a wrapper to full viewport width

A Pen by HigherEducation.com on CodePen.

License.

index.html

<main>

  <p>Lucas ipsum dolor sit amet yoda organa coruscant fett c-3p0 coruscant organa jade lando jinn. Sith wedge wicket mon hoth. Sidious darth c-3po darth ben yoda skywalker. Fisto ewok leia antilles calrissian. Boba moff yavin wookiee tatooine mon qui-gonn aayla aayla. Yoda padmé han kit naboo fett. Binks mace mon darth ben solo. Aayla skywalker binks dantooine. Fett boba chewbacca skywalker endor obi-wan wedge darth hutt. Hutt calamari solo biggs calrissian mara kenobi. Windu coruscant solo vader. Biggs wookiee vader utapau skywalker watto greedo darth droid. </p>

  <figure class='full-width'>
    <img src="https://images.unsplash.com/photo-1467173572719-f14b9fb86e5f?dpr=1&auto=compress,format&crop=entropy&fit=crop&q=40">
    <figcaption>Some text.</figcaption>
  </figure>

  <p>Skywalker padmé bothan amidala tatooine maul. Hutt dantooine hutt yavin. Endor jar luke mace ventress jade. Hutt yoda endor coruscant grievous. Hutt jabba jinn greedo darth anakin k-3po darth. Qui-gonn tusken raider alderaan skywalker palpatine lando jabba fett moff. Darth owen hutt solo jabba wedge darth jango darth. Kenobi owen dooku palpatine c-3p0. Amidala mustafar kashyyyk vader antilles dagobah boba tatooine mara. Lando kessel lando dantooine yavin naboo hutt skywalker. Chewbacca darth fett gamorrean darth jango skywalker. </p>

  <p>Kenobi jade darth mon mace skywalker sidious kessel organa. Antilles jabba hutt hutt mace utapau palpatine fett. Darth jango skywalker watto leia. Bespin bothan naboo twi'lek organa organa ponda twi'lek skywalker. Tusken raider darth moff skywalker vader tatooine moff mandalorians cade. Jinn fett maul organa biggs. Ventress darth moff fett organa. Ventress anakin lobot yavin jade yavin. Jango c-3p0 kit mace wicket han darth hutt moff. Mace darth vader skywalker luke organa jabba organa. Mon ponda jabba lobot solo. </p>

  <p>Kamino ackbar moff utapau hutt. Moff padmé grievous luke fett leia calamari. Organa anakin hutt padmé skywalker dooku thrawn wookiee antilles. Solo hutt sebulba moff. Aayla droid anakin twi'lek. Leia mon endor calrissian dooku. Qui-gon kenobi organa coruscant mon. Solo maul moff darth palpatine mara wampa skywalker hutt. Skywalker greedo binks moff boba droid qui-gon grievous calrissian. Darth biggs wicket dagobah. Cade hutt wookiee antilles obi-wan dagobah lando padmé mace. Coruscant kenobi jinn han. </p>

</main>

script.js

// ORIGINAL ARTICLE: https://css-tricks.com/full-width-containers-limited-width-parents/

style.css

* {
  box-sizing: border-box;
}

/* This technique doesn't naturally cause horizontal overflow, but once there is natural vertical overflow, it causes horizontal overflow, so stopping here. */
body {
  overflow-x: hidden;
}

img { 
  max-width: 100%; 
}

main {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

p, figure {
  margin: 15px 0;
}
figcaption {
  text-align: center;
  color: #999;
}