Wordpress and images stretching with Chrome and sizes="auto"

Question

I just can't stop images that are lazy loaded in Chrome (Version 131.0.6778.109 (Official Build) (64-bit) ) with Wordpress 6.7.1 from vertically stretching.

Answer 1

I recently came across a bug in Chrome with Wordpress 6.7.1 that auto stretches images to 3000px high on lazy loaded images. It seems that its not the lazy load images that are the problem its the image sizes="auto" attribute.

I found this fix below after a hefty trawl over everywhere. So just copy this into your functions.php. Hope this helps, I had LS cache on the wp install as well, so if you do, just purge all caches.

add_filter(
        'wp_content_img_tag',
        static function ( $image ) {
                return str_replace( ' sizes="auto, ', ' sizes="', $image );
        }
);
add_filter(
        'wp_get_attachment_image_attributes',
        static function ( $attr ) {
                if ( isset( $attr['sizes'] ) ) {
                        $attr['sizes'] = preg_replace( '/^auto, /', '', $attr['sizes'] );
                }
                return $attr;
        }
);