fix(image): auto-scale embedded images to fit their container#8800
Open
omnizs38 wants to merge 1 commit into
Open
fix(image): auto-scale embedded images to fit their container#8800omnizs38 wants to merge 1 commit into
omnizs38 wants to merge 1 commit into
Conversation
Embedded images were not reliably scaled to fit the available width, and tall images could overflow the surrounding frame instead of being shrunk to be fully visible. Constrain the rendered image with max-width: 100% and object-fit: contain while letting width and height stay auto, so the whole image is always visible and the frame adjusts to the image's real aspect ratio without reserving fixed empty space. Signed-off-by: omnizs38 <omnizs@proton.me>
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.
Embedded images were not reliably scaled to fit the available width, and tall images could overflow the surrounding frame instead of being shrunk to be fully visible.
Constrain the rendered image with max-width: 100% and object-fit: contain while letting width and height stay auto, so the whole image is always visible and the frame adjusts to the image's real aspect ratio without reserving fixed empty space.
📝 Summary
Specifically, it addresses the first two of the three points in that issue:
🏁 Checklist
npm run lint/npm run stylelint/composer run cs:check)🤖 AI (if applicable)