[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