Chen Yang

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:

  <img class="full-bleed" src="" />

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

  .full-bleed {
    max-width: 100vw;

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.

More Reading