Skip to content

Revisit aligned images with inline width larger than max getting displayed off-center #1086

@westonruter

Description

@westonruter

As a user, I expect my images inside a post to be aligned correctly, even if they are larger than the max-width of the given viewport.

  • AC1: Identify when and why the viewport breaks.
  • AC2: A user who has a wider-than-viewport image expects their image to display in margin; using the plugin's sanitizer, we expect this to be fixed automatically.

The conversion of width to max-width was originally added in #495. This was removed recently in #1064 as it was not determined to be the best solution to the problem reported in #494 (“Aligned images with inline width larger than max get displayed off-center”)? In #610 it was suggested to be removed:

Notably, the current AMP spec does not […] specify that width should be replaced by max-width, thus these rules are no longer enforced.

It feels like it fixes a symptom but isn't the right solution to the underlying problem.

In #1064 (comment) @mehigh comments:

Instead of replacing the width by max-width, a solution used almost everywhere on the internets is to introduce a max-width: 100%; on the images. That way they would 'stay put' regardless on whether the width attribute is larger than the container or not. But there are edge cases, and nuances, as with any solutions.

So we need to (1) replicate the original issue and (2) determine what the best fix is.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions