Skip to content

FIX: Image stretch on width more than container size#70251

Closed
patil-vipul wants to merge 2 commits intoWordPress:trunkfrom
patil-vipul:fix/image-stretch-on-width
Closed

FIX: Image stretch on width more than container size#70251
patil-vipul wants to merge 2 commits intoWordPress:trunkfrom
patil-vipul:fix/image-stretch-on-width

Conversation

@patil-vipul
Copy link
Copy Markdown

@patil-vipul patil-vipul commented May 28, 2025

What?

Closes: #70250
Fix image block aspect ratio distortion when resizing beyond container width

Why?

When users resize an image block beyond the container width in the block editor, the image becomes vertically stretched and distorted, breaking the aspect ratio. This creates a visual inconsistency between the editor and frontend, where the frontend correctly maintains aspect ratio but the editor shows a distorted image.
The issue is caused by height: inherit in the ResizableBox CSS rule, which forces the image to take the manually set height value even when the width is constrained by the container. This affects user experience as the editor preview doesn't match the actual frontend appearance.

How?

  • Changes height: inherit to height: auto - This allows the image to maintain its aspect ratio when width is constrained
  • Keeps width: inherit - This maintains the existing width behavior for resize functionality

Screenshots or screencast

Before After

|
image
|image|

@github-actions
Copy link
Copy Markdown

github-actions bot commented May 28, 2025 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: patil-vipul <vipulpatil@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: TheJeffr0 <jeffr0@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions
Copy link
Copy Markdown

github-actions bot commented May 28, 2025

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @patil-vipul! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label May 28, 2025
@patil-vipul patil-vipul mentioned this pull request May 28, 2025
Closed
6 tasks
@Mamaduka Mamaduka added [Type] Bug An existing feature does not function as intended [Block] Image Affects the Image Block labels May 28, 2025
@Mamaduka
Copy link
Copy Markdown
Member

Mamaduka commented May 28, 2025

@stokesman, any thoughts on the proposed fix? I'm not sure if this is related to the recent image resizable refactoring.

@stokesman
Copy link
Copy Markdown
Contributor

stokesman commented May 30, 2025

any thoughts on the proposed fix? I'm not sure if this is related to the recent image resizable refactoring.

As far as I can tell that refactoring fixed the issue this is aimed at. I worry I might be missing something but I can't reproduce it. I commented on the original issue.

@t-hamano
Copy link
Copy Markdown
Contributor

t-hamano commented Jun 4, 2025

Hi @patil-vipul, this issue seems to be solved in the latest Gutenberg.

I'm going to close this PR, but thank you for your efforts!

@t-hamano t-hamano closed this Jun 4, 2025
@patil-vipul
Copy link
Copy Markdown
Author

patil-vipul commented Jun 5, 2025

@t-hamano Understood, thanks for your inputs 🙇.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@artemiomorales artemiomorales Awaiting requested review from artemiomorales

Assignees

No one assigned

Labels

[Block] Image Affects the Image Block First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Inconsistent Look With an Image Block in Mobile View in The Backend and Frontend

4 participants

@patil-vipul @Mamaduka @stokesman @t-hamano