Image block lightbox: The enlarged image isn't responsive

[afercia]

Description

Splitting this out from #54971

See #54971 (comment)
See #52765 (comment)

The lightbox enlarged image doesn't scale when resizing the window or changing device orientation.

This happens regardless of the initial orientation or window size:

• When the viewport width gets wider, either by changing orientation from portrait to lanscape or by just increasing the browser iwndow width, the enlarged image keeps the same size. Expected: to be responsive.
• When the viewport width gets smaller, the enlarged image is cut-off at the edges.

Seems to me this is less than ideal especially on tablets and other small screens. The current behavior isn't great on dsktop either. I'd tend to think all images in WordPress should be responsive and adapt to the available space.

Step-by-step reproduction instructions

• Creat a post, add an image block and set the image to open in the lightbox.
• Make sure the image is a large image.
• Publish and view the front end.
• Emulate a tablet screen size via your browser dev tools.
• Open the lightbox
• Change orientation.
• Observe the image doesn't scale.
• Close the lighbox.
• Change orientation.
• Open the lightbox
• Change orientation again.
• Observe the image doesn't scale.

Screenshots, screen recording, code snippet

When changing device orientation (or resizing the browser window), the image in the open modal dialog doesn't scale correctly:

• It is either cut-off on the left and right edges
• Or it doesn't enlarge to take the new available space.

The user experience is less than ideal especially when the image is cut-off on the sides, as some parts of the image aren't visible any longer.

Environment info

No response

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