Chrome renders image at viewport width

[attiks]

This was reported on https://www.drupal.org/node/2449033 and sounds like a bug.

Renders at 100% viewport width

<img srcset="https://www.drupal.org/sites/all/themes/bluecheese/images/world-map.png 450w" alt="My Image" title="My Image">

Renders at native image width

<img src="https://www.drupal.org/sites/all/themes/bluecheese/images/world-map.png" alt="My Image" title="My Image">

[aFarkas]

The default/fallback value for sizes is "100vw", so no bug.

[attiks]

@aFarkas you're right, thanks

[elyobo]

~This doesn't really make sense to me; the default for sizes is 100vw but isn't that only used to select the image to download? Why does that have any bearing on the width that it's actually rendered at?~

Never mind; seems unintuitive, but I see that this is indeed the expected behaviour (according to MDN anyway, not sure where it is in the spec).

The selected source size affects the intrinsic size of the image (the image’s display size if no CSS styling is applied).

[eeeps]

@elyobo

1. ws get divided by sizes and normalized into “pixel density descriptors” (like 1x, 2x...) https://html.spec.whatwg.org/multipage/embedded-content.html#normalizing-the-source-densities
2. The resources’ actual width in data-pixels is divided by the density to determine the “density-corrected intrinsic width” of the image in CSS pixels. https://html.spec.whatwg.org/multipage/embedded-content.html#density-corrected-intrinsic-width-and-height

(And, yeah, it's surprising that the sizes value, which is supposed to be a rough estimate of the layout width of the image, can sometimes determine the layout width of the image.)

[elyobo]

Thanks for those links @eeeps, much appreciated.