Correct fluid image cropping: both maxHeight and maxWidth #21870
Conversation
This file contains 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
Fluid function crops image with aspect ratios when both maxWidth and maxHeight is set. This behavior is currently not documented, but desirable as it allows cropping image while retaining fluid image characteristics. However, presentationHeight is calculated only from original height, not maxHeight if specified, leading to incorrect presentationHeight. This commit corrects it.
make fluid base64 images cropped when botth `maxWidth` and `maxHeight` is set
|
@vladar @benedictjohannes I think #17006 does crop correctly, see the demo here. Could be wrong but seems correct to me and how I would use them. Queries for the crop examples can be seen here |
|
@vladar @sbardian Yes, I've been checking #17006 and it basically solve what I'm trying to solve in a more holistic manner. As it's clearly the superior fix, I'm closing this PR. Thank you for pointing this out, I've tested the PR and it's working well (bootsrap based project). I can only hope that #17006 gets merged sooner, I'm really needing this functionality in my project. |
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.
These PR commits improve fluid image cropping.
In this PR:
maxHeightandmaxWidthis set.details
Current, when both
maxHeightandmaxWidthis set, the image is cropped cropped to an aspect ratio ofmaxHeightandmaxWidth, but base64 and tracedSVG is not cropped, and presentationWidth followsmaxWidthbut presentationHeight is calculated from original image propoortion.While behavior is undocumented/unexpected, this allows image cropping while maintaining fluid image characteristics, that is very useful in cases like responsive hero image sliders.
These corrections help to address #11851, add documentation (helps #12972) and in my tests help #12008
If current behavior of cropping should be optional as this comment specifies, a simple option such as
disableCropshould be simple to implement.This is my first attempt on contributing to open source, please help advice.