[wp-trac] [WordPress Trac] #62515: 6.7.1. Pictures height
WordPress Trac
noreply at wordpress.org
Wed Feb 26 12:28:06 UTC 2025
#62515: 6.7.1. Pictures height
-------------------------------------------------+-------------------------
Reporter: fredel | Owner: joemcgill
Type: defect (bug) | Status: reviewing
Priority: normal | Milestone: 6.8
Component: Media | Version: 6.7.1
Severity: normal | Resolution:
Keywords: has-testing-info has-screenshots | Focuses:
reporter-feedback |
-------------------------------------------------+-------------------------
Comment (by skithund):
Here's a reproduction for triggering `contain-intrinsic-size` stretching
using `object-fit: cover` on image, which is being loaded lazily and is
using `sizes="auto"`.
Browser bug in Chrome or developer error? Markup is taken from custom
WordPress theme, reduced and switched to using placeholder images.
Code in JSFiddle https://jsfiddle.net/vbwh9s85/3/
{{{
<figure>
<img
src="https://placehold.co/300x150"
alt=""
sizes="auto, (max-width: 300px) 100vw, 300px"
loading="lazy"
srcset="https://placehold.co/150x75 150w,
https://placehold.co/300x150 300w, https://placehold.co/500x250 500w,
https://placehold.co/1024x512 1024w"
heigth="150"
width="300"
>
</figure>
<figure>
<img
src="https://placehold.co/300x150"
alt=""
sizes="(max-width: 300px) 100vw, 300px"
loading="lazy"
srcset="https://placehold.co/150x75 150w,
https://placehold.co/300x150 300w, https://placehold.co/500x250 500w,
https://placehold.co/1024x512 1024w"
heigth="150"
width="300"
>
</figure>
<style>
img:is([sizes="auto" i], [sizes^="auto," i]) {
contain-intrinsic-size: 3000px 1500px;
}
figure {
display: block;
width: 200px;
}
img {
object-fit: cover;
}
</style>
}}}
--
Ticket URL: <https://core.trac.wordpress.org/ticket/62515#comment:27>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list