[Block] Image - Resized images maintain a fixed height on small screens, distorting image or adding margins

[cuemarie]

Description

When an image block is resized and the user does not choose a scaling behavior, the image is stretched (compressed) on mobile devices, retaining it's original height while reducing it's width to fit the screen.

If the user chooses the Scale option to contain the image size, there are large white margins added above and below the image on small devices in order to retain the same height.

Step-by-step reproduction instructions

1. Insert an image into a post
2. Resize the image to a smaller size, but do not select a scaling option
3. View the site using responsive tools and observe the image respond by only reducing width
4. Return to the editor and select Contain under SCALE
5. Refresh the site, and now observe the margins added to top and bottom of the image, again retaining the height of the image

Screenshots, screen recording, code snippet

Screen.Capture.on.2023-07-18.at.09-45-47.mp4

No Scale Set

"Contain" Scale Set

Environment info

• WordPress 6.2.2
• Replicated in Gutenberg 16.2.1, 16.2.0, 16.1.2, and with Gutenberg deactivated.
• Theme used in test: TT3

Originally reported here: Automattic/wp-calypso#79533

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[cuemarie]

Workaround

In the editor, clear out the Height selection and it will default to Auto and remove the scaling feature. This will correct the issue:

Editor

Live Site

[sgomes]

Trying this on a different example, the element had the following styles:

{
    width: 545px;
    height: 472px;
}

But Gutenberg also adds the following:

.wp-block-image img {
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
}

This means that when max-width kicks in, the height is no longer proportional, because it’s using the 472px fixed value, which has precedence over the auto because it's in an element style attribute.

[sgomes]

The only solution I see here (other than the contain approach) is to keep height as auto in the element styles. So instead of:

{
    width: 545px;
    height: 472px;
}

the element styles should be:

{
    width: 545px;
    height: auto;
    aspect-ratio: 545 / 472;
}

This will account for the use-case where the aspect ratio is intentionally changed (i.e. when the user intentionally stretched the image in the editor), and will preserve that aspect ratio regardless of whether the preferred width or the max width gets used.

[annezazu]

@ajlende I see you're working on some image block fixes. Mind taking a look here?

[ajlende]

Thanks for the ping. This is another side-effect of #52286 it seems. I'll try to take a look this week.