Image Aspect Ratio: Rely only on width to define image sizes when aspect ratio is set #53225
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
scruffian
commented
Aug 1, 2023
| height: elt.offsetHeight, | ||
| aspectRatio: undefined, | ||
| height: 'auto', | ||
| aspectRatio: aspectRatio ? aspectRatio : undefined, |
There was a problem hiding this comment.
I'm not sure why this wasn't set before?
There was a problem hiding this comment.
The drag handles set both the width and the height so the aspectRatio needed to be cleared since it isn't valid with both width and height.
scruffian
commented
Aug 1, 2023
| @@ -689,8 +697,8 @@ export default function Image( { | |||
| onResizeStop(); | |||
| setAttributes( { | |||
| width: elt.offsetWidth, | |||
| height: elt.offsetHeight, | |||
| aspectRatio: undefined, | |||
| height: 'auto', | |||
There was a problem hiding this comment.
This is the main change. We are now relying on the width and aspect ratio to infer the height.
There was a problem hiding this comment.
It seems strange to me that dragging the bottom handle would set the width of the image. That interaction feels to me like it should be setting the height, but maybe that's just me.
There was someone who requested modifier keys for proportional resizing in #51843, that sort of interaction is what makes the most sense to me.
scruffian
commented
Aug 1, 2023
| imgStyle.height = 'auto'; | ||
| imgStyle.width = '100%'; | ||
| } | ||
| if ( width ) { |
There was a problem hiding this comment.
This will override the setting above.
scruffian
commented
Aug 1, 2023
| objectFit: scale, | ||
| ...borderProps.style, | ||
| }; | ||
| if ( aspectRatio ) { |
There was a problem hiding this comment.
This is needed for the case where there is no width/height defined.
|
Size Change: +81 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
ajlende
reviewed
Aug 1, 2023
| imgStyle.width = width; | ||
| } | ||
|
|
||
| if ( height && ! isNaN( height ) ) { |
There was a problem hiding this comment.
Why might height be NaN? We should try to prevent that from happening rather than checking isNaN().
There was a problem hiding this comment.
Height can be 'auto', so maybe we should just check for that.
ajlende
reviewed
Aug 1, 2023
There was a problem hiding this comment.
It would be nice if we could avoid editing save.js so we don't have to add a block deprecation.
There was a problem hiding this comment.
I don't know if this will require a deprecation anyway...
ajlende
reviewed
Aug 1, 2023
| @@ -547,6 +547,21 @@ export default function Image( { | |||
| const borderProps = useBorderProps( attributes ); | |||
| const isRounded = attributes.className?.includes( 'is-style-rounded' ); | |||
|
|
|||
| const imgStyle = { | |||
| aspectRatio: aspectRatio ? aspectRatio : undefined, | |||
There was a problem hiding this comment.
Is the ternary needed here? What falsy values do we need to convert to undefined?
There was a problem hiding this comment.
It's probably not needed it was just for my own ease of reading.
ajlende
reviewed
Aug 1, 2023
| width={ width } | ||
| height={ height } | ||
| height={ isNaN( height ) ? undefined : height } |
There was a problem hiding this comment.
In order to prevent layout shifts when height is 'auto', we need to ensure that this property contains a real value.
There was a problem hiding this comment.
We could keep the height for the image attributes and just use auto in the CSS
|
Closing in favour of #53274 |
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.
What?
When setting aspect ratio for an image, we define both a width and a height. This is unnecessary, as the browser can infer the height based on a width and an aspect ratio. This PR removes the reliance on the height attribute for images that have aspect ratio defined, to allow the browser to calculate the height. Fixes #52739
Why?
When the browser is smaller than the width/height defined in the CSS, the image is stretched. See #52739
How?
When the user resizes the image and aspect ratio is defined, then don't update the height attribute, only the width.
Testing Instructions
Screenshots or screencast
Co-authored-by: Maggie 3593343+MaggieCabrera@users.noreply.github.com