Preserve aspect ratio of images #242
Merged
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
rodarima
force-pushed
the
fix-image-ratio
branch
from
155bcc9
to
d2d2b33
Compare
rodarima
force-pushed
the
fix-image-ratio
branch
from
d6a10bb
to
08c617e
Compare
rodarima
commented
Oct 7, 2024
rodarima
force-pushed
the
fix-image-ratio
branch
from
52f39c4
to
d9797ea
Compare
Tests several combinations of size contraints on images so we can check if the aspect ratio is kept or not.
Prevents errors by one pixel
When posible, change the image size so the aspect ratio is always
preserved. This is only posible when one or both dimensions have some
room to play. When both dimensions are not fixed, a naive algorithm
tries to satisfy all {min,max}-{width,height} and aspect ratio
constraints, but it may fail. In that case, the aspect ratio is not
preserved.
Fixes the HTML tests img-aspect-ratio and img-max-bounds.
Prevents reducing the available width of a body with width:auto and min-width:100px to 100px. The Widget::calcFinalWidth() method is also heavily documented, so we can understand precisely what it does.
When the initial width is -1, the contrainsts of min-width and max-width are not applied. If we set the viewport width after calcFinalWidth() it may exceed max-width. It is guaranteed to return a value different from -1 when the initial width is positive.
When correcting a requisition, percent values were not being computed which prevents the min-height or max-height values to be taken into account.
When a widget calls the parent to correct its own requisition, let the child widget perform adjustments on the requisition. This allows images to control the height when the parent changes the width, so the image can preserve its own aspect ratio.
For cases where the available height is being computed and the CSS style has the height to auto, there available height is infinite. Don't return the viewport unless forceValue is set.
Images should preserve their own aspect ratio, which is determined by the image buffer size, also known as the intrinsic size. Currently, when a child requests a requisition to be corrected by correctRequisition(), only the size was adjusted, ignoring the aspect ratio. The new Widget ratio variable holds the desired aspect ratio for the widget, and will only be taken into account when non-zero. In that case, then correcting the requisition, a naive algorithm tries to first increase the length of the small size to fill the preferred aspect ratio. In the case that it is not enough, the larger size is then decreased to fit the aspect ratio. And if that doesn't work either, the aspect ratio is not enforced and the widget will be distorted. There are special cases for correctRequisition() depending if the parent exists or not. The same approach is taken for both cases, but using the viewport size instead of the parent size.
When CSS min-{width,height} > max-{width,height} set the
max-{width,heigh} to the maximum value min-{width,height}.
The aspect ratio is now preserved by Widget::correctRequisition(), so we don't need to do more steps after the call.
|
Testing with float images improves when compared with the previous behavior, but continues to show problems when computing the parent requisition. I think we can leave this for a future PR, to avoid stalling this one forever. |
The requisition box includes the margin, padding and border. To compute the aspect ratio of the image we need to remove them to get the content box. Once the adjustment is done, we add the borders again.
rodarima
force-pushed
the
fix-image-ratio
branch
from
d9797ea
to
572b934
Compare
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.
A common problem for images is that only one dimension is given {height,width}
or that a range is set by {min,max}-{height,width}. Previously, the original
size of the image was used to compute the aspect ratio and then fill the missing
dimension.
But the procedure requires more steps to fulfill all constraints. This PR tries
to cover all posible cases of constrained images while preserving the aspect
ratio. When is not posible, the aspect ratio is distorted to fit the size
constraints.
TODO
compute the image size correctly. -> Tested manually, but we may want to add more render tests to the suite.
How it looks
Before:After: