New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chrome renders image at viewport width #262

Closed
attiks opened this Issue Mar 12, 2015 · 5 comments

Comments

Projects
None yet
4 participants
@attiks
Member

attiks commented Mar 12, 2015

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

This comment has been minimized.

Show comment
Hide comment
@aFarkas

aFarkas Mar 12, 2015

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

aFarkas commented Mar 12, 2015

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

@attiks

This comment has been minimized.

Show comment
Hide comment
@attiks

attiks Mar 12, 2015

Member

@aFarkas you're right, thanks

Member

attiks commented Mar 12, 2015

@aFarkas you're right, thanks

@attiks attiks closed this Mar 12, 2015

@elyobo

This comment has been minimized.

Show comment
Hide comment
@elyobo

elyobo Mar 29, 2017

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).

elyobo commented Mar 29, 2017

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

This comment has been minimized.

Show comment
Hide comment
@eeeps

eeeps Mar 29, 2017

@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.)

eeeps commented Mar 29, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@elyobo

elyobo Mar 29, 2017

Thanks for those links @eeeps, much appreciated.

elyobo commented Mar 29, 2017

Thanks for those links @eeeps, much appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment