Images distorted in v6.7.1

[ReallyGreenJames]

This is a follow-up to #62413.

On one of my sites 6.7.1 does not resolve the issue. I have the same problem as described:

https://core.trac.wordpress.org/ticket/62413#comment:45
"images stretched too tall".

Demonstrated here (affects Chrome):
​https://dev.yorkshiredance.com/

[jeroenrotty]

Somehow on your dev page (code line 26) I see an inline <style></style> with:

<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>

If I disable that - images on your site show up as they should. I don't think this inline style comes from either core or the block editor?

[junior]

I am also having the same problem but it's only happening to some images. Here's an example:

Blurry image (notice the loading="lazy"):

<img width="1920" height="1277" src="https://REDACTED.com/wp-content/uploads/2024/10/autumns-corridor.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Autumn’s Corridor" style="border-radius:0px;border-style:none;border-width:0px;width:100%;height:100%;object-fit:contain;" decoding="async" loading="lazy" srcset="https://REDACTED.com/wp-content/uploads/2024/10/autumns-corridor.jpg 1920w, https://REDACTED.com/wp-content/uploads/2024/10/autumns-corridor-960x639.jpg 960w, https://REDACTED.com/wp-content/uploads/2024/10/autumns-corridor-768x511.jpg 768w, https://REDACTED.com/wp-content/uploads/2024/10/autumns-corridor-1536x1022.jpg 1536w" sizes="auto, (max-width: 1920px) 100vw, 1920px">

Not blurry (no loading lazy):

<img width="1920" height="1277" src="https://REDACTED.com/wp-content/uploads/2024/10/backyard-colors-1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Backyard Colors" style="border-radius:0px;border-style:none;border-width:0px;width:100%;height:100%;object-fit:contain;" decoding="async" fetchpriority="high" srcset="https://REDACTED.com/wp-content/uploads/2024/10/backyard-colors-1.jpg 1920w, https://REDACTED.com/wp-content/uploads/2024/10/backyard-colors-1-960x639.jpg 960w, https://REDACTED.com/wp-content/uploads/2024/10/backyard-colors-1-768x511.jpg 768w, https://REDACTED.com/wp-content/uploads/2024/10/backyard-colors-1-1536x1022.jpg 1536w" sizes="(max-width: 1920px) 100vw, 1920px">

Strangely enough, I have completely disabled image resizing on upload so I suspect WP to be using the image versions generated by my WooCommerce plugin.

This is on Twenty Twenty Four theme.

[fredel]

Replying to jeroenrotty:

Here? https://core.trac.wordpress.org/ticket/62413#comment:36

Seems same issue i am having https://core.trac.wordpress.org/ticket/62515

Somehow on your dev page (code line 26) I see an inline <style></style> with:

<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>

If I disable that - images on your site show up as they should. I don't think this inline style comes from either core or the block editor?

[poena]

Duplicate of #62515.

Hi @ReallyGreenJames and welcome to WordPress Trac!

Thank you for the report. I believe this is a duplicate of https://core.trac.wordpress.org/ticket/62515 which was reported just before your ticket. I will close this ticket, to keep the discussions and testing in one place.