Full Bleed within A Constrained Wrapper

Yesterday people in the Discord of CSS for JS Developers Course asked whether there's any solution to achieve a full-bleed image within a wrapper with a maximum width.

My Solution

So I tried this out:

<article>
  <p>...</p>
  <img class="full-bleed" src="" />
  <p>...</p>
  <p></p>
</article>

<style>
  article {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .full-bleed {
    max-width: 100vw;
  }
</style>

The entire code is in this Codepen.

Other "Trick"

Then Josh shared this solution posted on CSS-Tricks. I think the solution is very COOL.

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

This does not require any additional settings. In my case, I set the elements in the article to Flexbox layout, which may cause some unexpected problems.

My Solution

Other "Trick"

More Reading