fix: preserve aspect ratio for images with numeric dimensions#10130
Merged
Conversation
Set numeric width/height as HTML attributes instead of inline styles. Inline styles override the stylesheet's `height: auto`, so when `max-width: 100%` clamped an image's width in a constrained container (e.g. mo.hstack), the height stayed fixed and the image was distorted. HTML attributes provide the intrinsic size and aspect ratio while letting stylesheet rules shrink the image proportionally. String values like "100%" are only valid in CSS and still go through the style attribute, preserving the percentage support added in #9966. Fixes matplotlib figures (which carry pixel dimensions in their mimebundle metadata since #9144) rendering squished inside mo.hstack.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the ImageOutput frontend rendering so numeric width/height are emitted as HTML attributes (preserving intrinsic aspect ratio), while percentage/string dimensions continue to be applied via inline CSS.
Changes:
- Render numeric
width/heightas<img width>/<img height>attributes instead of inline styles. - Keep string dimensions (e.g.,
"100%") on thestyleattribute to preserve percentage support. - Add unit tests covering numeric, string, mixed, and absent dimension cases.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/src/components/editor/output/ImageOutput.tsx | Switch numeric dimensions to HTML attributes; keep string dimensions as inline styles. |
| frontend/src/components/editor/output/tests/ImageOutput.test.tsx | Add tests to validate attribute-vs-style behavior for dimensions. |
Comment on lines
+20
to
+24
| // Numeric dimensions are set as HTML attributes rather than inline styles. | ||
| // Attributes give the browser the image's intrinsic size and aspect ratio, | ||
| // but can still be overridden by stylesheet rules (`max-width: 100%; | ||
| // height: auto` from preflight), so images shrink proportionally in | ||
| // width-constrained containers like mo.hstack. Inline styles would win |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
mscolnick
approved these changes
Jul 10, 2026
Contributor
|
🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.23.14-dev54 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR changes images to carry their width and heights as HTML attributes instead of as inline styles. This in turn allows our stylesheet to correctly scale images when rendered in (for example) hstacks.
String values like "100%" are only valid in CSS and still go through the style attribute, preserving the percentage support added in #9966.
In particular, this prevents matplotlib figures (which carry pixel dimensions in their mimebundle metadata since #9144) from being squished or distorted.
Before change:
With fix: