Drag to resize image doesn't maintain aspect ratio when constrained

[ajlende]

Description

Dragging to resize an image sets the CSS width and height, so when the image is constrained by max-width such as in TT3 the aspect ratio is no longer maintained. (see screenshots)

This could be solved by only setting only one of the dimensions to constrain the image. I'd expect dragging the bottom handle to set the height and the right handle to set the width potentially.

When both width and height are set, the aspect ratio may need to be computed so that the image can be scaled down with max-width instead of stretched/cropped.

Step-by-step reproduction instructions

1. Add an image block with an image.
2. Use the handles on the image to resize (not the inputs in the sidebar).
3. View the image in the frontend in a context where max-width would constrain the image (a narrow window)

Screenshots, screen recording, code snippet

Editor after scaling down the image a bit:

Front-end:

Environment info

I can recreate this with TT3 and WordPress 6.3, and TT3 and Gutenberg v 16.4.0.

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

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.