To increase readability of our articles, we would limit their line length:

article {
  max-width: 60ch; /* no more than 60 characters per line */
}

Everything inside article is clipped to the maximum width.

But what if you want your image(or any other elements) to span the entire page(i.e. full-bleed), or even just to "break out" to have any width that is wider than its container?

You can either do 1) manual horizontal offset via negative margin-left and translateX to shift the image to the left, or 2) CSS Grid. To my mind, they are hacky or over-engineered.

I want to present here simpler ways.

First of all, let's lay our foundation: Instead of setting width on the container, we set it to its child elements:

/* Instead of doing this
article {
  max-width: 60ch;
  margin: 0 auto;
}
*/

/* we set width on its direct child elements */
article > * {
  max-width: 60ch; /* width can go wider than 60ch */
  margin: 0 auto; /* center them */
}

Since article container is no longer limited to a specific width, any child elements now has room to grow sideways. We also set margin: 0 auto to center them.

Breaking out at its simplest form is when we are presented with this HTML structure:

<article>
  <p>Texts</p>
  <img />
  <p>Texts</p>
</article>

And we want to break out the img.

To do that, we will set the img to be a block-level element(so that it can be centered) and
give it a width, in this case 100vw to span the entire page:

img {
  display: block;
  width: 100%;
  max-width: 100%; /* to override "max-width: 60ch" and to serve the same purpose */
}

And it works - Following up on the previous demo:

So far so good.

Now, what if your image is wrapped in a figure:

<figure>
  <img width="900px" src="" alt="" />
  <figcaption></figcaption>
</figure>

And the image has its width set or even just with its intrinsic width. How will we break it out while centering it? Method above no longer works for us.

This is where CSS Flexbox comes into play:

.break-out {
  display: flex;
  flex-direction: column;
  align-items: center;
}

What we are saying there is:

1. Make the child elements to be a column, and
2. Center these columns horizontally within available space.

Then we apply the flexbox properties on the figure element:

<figure class="break-out">
  <img width="900px" src="" alt="" />
  <figcaption></figcaption>
</figure>

Now whatever the width of the img, it will be centered even until it's full-bleed:

The methods I have demonstrated here have the following benefits:

1. Principle of Least Power - CSS Flexbox is a less powerful solution than CSS Grid.
2. No complicated calculation - We let browser to center our image to available space.
3. Responsive - No re-calculation needed on our part when browser resizes.

The second-order benefits would be:

1. For users: optimal performance - less code shipped and less expensive codes to run - happy browser, happy users.
2. For developers: simpler and less code to maintain, which means less valuable cognitive resources spent.

I found this method when I was building Zuunote. It's a Markdown editor in which images can be resized. The tricky thing is, in Markdown, image syntax is parsed as an inline element. So, when users do create inline images when writing in a paragraph, this method enables them to resize between inline and full-bleed.

This is how I achieved it: Similar to what we just discussed, I wrap the img element in a span to retain the inline characters:

<span>
  <img src="" alt="" />
</span>

Then I apply our flexbox properties on the span when user has resized beyond the boundary of paragraphs:

<span class="break-out">
  <img src="" alt="" />
</span>

And the browser will keep the image centered without any expensive hand-holding on my part.

Here is the result:

One gesture covers a spectrum of resizing intentions - I think that's pretty neat :)