Description

Note: This issue was initially reported @jeffr0 on core trac

When adding a width to an image block larger than the image itself and previewing the post in Mobile View, the image appears stretched or squished instead of scaled down.

On the frontend, the image is scaled correctly. I tested this in Twenty Twenty-five and one other theme. The issue is present in both. The expectation is for the backend to visually match the frontend.

Expected Behaviour

• Maintain its aspect ratio (proportional width/height relationship)
• Be constrained to container width visually
• Display the same way in the editor as on the frontend
• Not stretch or distort vertically

Actual Behaviour

When resizing an image block beyond the container width:

• Image stretches vertically and becomes distorted
• Aspect ratio is broken in the block editor
• Frontend displays correctly with proper aspect ratio
• Editor and frontend appearance don't match

Step-by-step reproduction instructions

1. Open WordPress block editor (post or page editor)
2. Add an Image block
3. Upload or select a large image (e.g., 2000px+ width)
4. Click on the image to select it and show resize handles
5. Use the resize handle to drag the image width beyond the container width (wider than the editor content area)
6. Continue dragging to increase width further
7. Observe that the image starts stretching vertically (height increases disproportionately)

Screenshots, screen recording, code snippet

Editor

Frontend

Environment info

• WordPress version: 6.8.1
• Gutenberg version: "20.9.0"
• Are all plugins except Gutenberg deactivated? "Yes"
• Are you using a default theme (e.g. Twenty Twenty-One)? "Yes"

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure