Image CDN set wrong max-width for the cover block

Resolved

(@hz_i3)

With image CDN:

<div class="wp-block-cover alignfull has-background-dim-10 has-background-dim clickable-cover is-style-default" style="min-height:100vh"><img loading="lazy" width="1519" height="753" class="wp-block-cover__image-background wp-image-1503" alt="mars mars rover space travel robot 73910" src="https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=750%2C600&ssl=1" style="object-position:50% 27%" data-object-fit="cover" data-object-position="50% 27%" srcset="https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?w=1625&ssl=1 1625w, https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=300%2C240&ssl=1 300w, https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=1024%2C819&ssl=1 1024w, https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=768%2C614&ssl=1 768w, https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=1536%2C1229&ssl=1 1536w, https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=1568%2C1254&ssl=1 1568w, https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=600%2C480&ssl=1 600w" sizes="(max-width: 750px) 100vw, 750px"><noscript><img loading="lazy" width="750" height="600" class="wp-block-cover__image-background wp-image-1503" alt="mars mars rover space travel robot 73910" src="https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=750%2C600&ssl=1" style="object-position:50% 27%" data-object-fit="cover" data-object-position="50% 27%" srcset="https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?w=1625&ssl=1 1625w, https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=300%2C240&ssl=1 300w, https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=1024%2C819&ssl=1 1024w, https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=768%2C614&ssl=1 768w, https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=1536%2C1229&ssl=1 1536w, https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=1568%2C1254&ssl=1 1568w, https://i1.wp.com/ivyrobots.com/wp-content/uploads/2021/05/mars-mars-rover-space-travel-robot-73910.jpeg?resize=600%2C480&ssl=1 600w" sizes="(max-width: 750px) 100vw, 750px" data-recalc-dims="1"></noscript><div class="wp-block-cover__inner-container">
</div></div>

Without:

So sizes="(max-width: 1625px) 100vw, 1625px" is changed to sizes="(max-width: 750px) 100vw, 750px".

On some monitors, the image is really blurry.

Viewing 1 replies (of 1 total)

Anonymous User 18700194
(@anonymized-18700194)

2 years, 10 months ago

Hi @hz_i3 –

I looked at your site and didn’t see where this is happening. On the homepage, I see the image and the use of the image CDN but I can’t find where the “max-width” is getting set how you describe. You can see that in this screenshot:

https://d.pr/i/P4umzq

I tested across various screen sizes and didn’t see it set. The only time I got a blurry image was when the cover block area exceeds the physical width of the image (for example in a window that is ~2400px wide which is greater than the image size of ~1625px). However, that would be expected.

I also tested on a test site using the Twenty Twenty One theme and a new cover block and couldn’t reproduce the behavior.

Is this still happening for you? Is it in a specific browser? If you can provide more information we can look into it for you.

Viewing 1 replies (of 1 total)

The topic ‘Image CDN set wrong max-width for the cover block’ is closed to new replies.