Image: Vertical image from URL cut when displayed in the lightbox

[gziolo]

Description

When using the lightbox behavior for the Image block that contains a vertical image inserted from URL, it displays correctly on the front end. However, when the lightbox gets opened, if the image is tall, then it gets cut on both the top and bottom of the image.

Step-by-step reproduction instructions

1. Activate the experiment that enables Interactivity API and Behaviors.
2. Go to the post editor.
3. Insert an image with a much bigger height than width using Insert from URL option, for example:
   https://pd.w.org/2023/05/7866470b6f485ce37.96403804.jpg.
4. In the advanced settings for the Image block, activate the lightbox behavior.
5. Publish the post.
6. Navigate to the post on the front end.
7. Open the lightbox and check whether the image is correctly displayed.

Screenshots, screen recording, code snippet

Vertical image in the block editor:

Vertical image in the lightbox on the frontend:

Environment info

• WordPress 6.2, Gutenberg latest (trunk)

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

[gziolo]

I was able to reproduce it for an uploaded image.

I set the image size to Large:

View on the site:

View with the lightbox opened:

[SantosGuillamot]

If I am not mistaken this could be solved using max-height: 100% and max-width: 100% (or something similar) here. I can work on a pull request for that.