Skip to content
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
Closed

Chrome renders image at viewport width #262

attiks opened this issue Mar 12, 2015 · 5 comments

Comments

@attiks
Copy link
Member

@attiks 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
Copy link

@aFarkas aFarkas commented Mar 12, 2015

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

@attiks
Copy link
Member Author

@attiks attiks commented Mar 12, 2015

@aFarkas you're right, thanks

@attiks attiks closed this Mar 12, 2015
@elyobo
Copy link

@elyobo 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
Copy link

@eeeps 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
Copy link

@elyobo 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.