Fix wide image to contain in content #1281
Conversation
A `<figure>` element with `.wp-block-image` and not `.is-resized` has its width set to a default of `fit-content`. That CSS rule value causes wider images to overflow out of the parent container. For this element, this commit adds an inline style of `width: auto`. Closes #1086.
| * @since 1.0 | ||
| * @see https://github.com/Automattic/amp-wp/issues/1086 | ||
| * | ||
| * @param DOMNode $node The DOMNode to adjust and replace. |
There was a problem hiding this comment.
I think we should be able to safely replace DOMNode with DOMElement here. We already know it is an element because we just called it via AMP_DOM_Utils::create_node().
There was a problem hiding this comment.
This does fix the issue in my testing, but I'm struggling to understand why it fixes the issue. Is it because Chrome (et al) don't support width:fit-content with determining sizes for custom elements like amp-img? Can intrinsic sizes be only determined for replaced elements such as img and video?
@westonruter Agreed. This PR feels like a bandaid to a more systematic problem between image rendering in non-AMP vs. AMP modes. Let's put this PR on hold until we get a response back from the AMPHTML team on issue 17084. |
hellofromtonya
changed the title
|
We will go ahead and merge this PR as it fixes the overflowing image issue. But we'll keep issue #1086 open to track for regression once the AMPHTML team resolves the open issue. |
westonruter
changed the title
This PR solves the problem of wide images overflowing the content width. It adds an inline style of
width: autoto the<figure>element when it has the class attribute'wp-block-image'but notis-resized.Why?
Gutenberg adds the class attributes and sets the CSS rule to:
The width value of
fit-contentis causing wider images to overflow. See the details in issue #1086 more information as well as screenshots. You can view the example posts here: Gutenberg post and Classic Editor post.By adding the inline CSS rule, wider images rescale and fit within the content.
It's worth noting that the issue does not occur with the Classic Editor.
Closes #1086.