Width of the image displayed is not exactly 100vw when the user agent selects image of width 3200px

Question

The user-agent selects one of the images below based on device pixel ratio and viewport size. But i have noticed that only when user-agent selects ./emmaHQbanner.jpg, the width of image displayed is not exactly 100vw instead its little more than that. I can't figure our why ?

html

<body>
<div>
    <img sizes="100vw"  src="./emma310.jpeg" srcset="./emma720banner.jpeg 720w, ./emma1920banner.jpeg 1920w, ./emmaHQbanner.jpg 3200w" alt="picture of emma watson">
<div>

css

*{
    padding: 0;
    border: 0;
    margin: 0;
}

html {
    width: 100vw;
}

div {
    width: 100vw;
    margin: 0;
    background-color: red;
    font-size: 0;
}

more info

user agent - firefox on ubuntu
emmaHQbanner.jpg - Resolution (width=3200px , height=642px)

case study

viewport (width 300)  (zoom - 100%)  chosen image - 720px   (display width-300)
viewport (width 640)  (zoom - 300%)  chosen image - 1920px  (display width-640)
viewport (width 800)  (zoom - 240%)  chosen image - 3200px  (display width-900*)
viewport (width 1920) (zoom - 100%)  chosen image - 1920px  (display width-1920)
viewport (width 6400) (zoom - 30%)   chosen image - 3200px  (display width-7200*)

If you want the width to be _exactly_ 3200 pixels, I believe the `sizes` attribute should be in pixels and not in view-width units that are relative to the window size. So `sizes="3200px"` and not `sizes="3200vw"`. See the [MDN tutorial for responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). — Boaz, Sep 12 '18 at 08:29
@Boaz The purpose of specifying `sizes="100vw"` is to fill entire viewport (100%) irrespective of the image sizes. That is, what i would want — , Sep 12 '18 at 08:45
@Binary_10 I misread. Are you saying the `img` overflows the window's width causing horizontal scroll? — Boaz, Sep 12 '18 at 08:47
@Boaz Yes, exactly. But it only happens when the resource `./emmaHQbanner.jpg` is chosen by the user-agent. — , Sep 12 '18 at 08:49
@Binary_10 Are you able to reproduce it in a [minimal example](https://stackoverflow.com/help/mcve), like in codepen or a Stackoverflow snippet? — Boaz, Sep 12 '18 at 09:03
@Boaz I can't add images and run the code in Stackoverflow snippet — , Sep 12 '18 at 12:44
`"the width of image displayed is not exactly 100vw instead its little more than that."` Does it only occurs when you inspect the image from the dev tools? — Quentin Veron, Sep 15 '18 at 20:32
I managed to reproduce chosing the 3200px wide image in the cases you provided (where 1920px seems more suitable) in Firefox 62 on Windows 10, but couldn't reproduce the wrong width setting (with the fiddle http://jsfiddle.net/gyvcLu92/, based on your and Observer's code). The wrong image selecting is probably due to the rounding errors (30%, or 0.3, is an infinite binary fraction, and Firefox uses only 32bit precision for sizes). Maybe the second problem has something to do with the big image itself? Doesn't it have any info like scale/pixel density in its metadata? — Ilya Streltsyn, Sep 20 '18 at 15:32

score 3 · Accepted Answer · 2018-09-21T14:34:16.743

I have found that the extra width being displayed is because I have provided incorrect pixel width of 3200w instead of 3607w for the image ./emmaHQbanner.jpg. (other images width being exact)

I've learned that the width specified in the srcset attribute for the images have to be exact. user agents assume it to be correct and calculates the rendering width based on author specified values.

score 2 · Answer 2 · answered Sep 15 '18 at 05:04

2

use max-width in css to prevent scroll

img{ max-width: 100% /* or 100vw */; }

or you can use

body{ width: 100vw;overflow-x: hidden; }

answered Sep 15 '18 at 05:04

Mohammadreza Esmaeeli

163
2
13

I'm not talking about **css** here. What's the point of using the attribute `sizes="100vw"` then ? – Sep 15 '18 at 05:41
It working perfectly if want to have a fixed percentage that match with parent size. So when the screen is bigger or larger the image/picture will grow accordingly but the image have to be larger than the img size. – kyorilys Nov 05 '20 at 10:05

score 0 · Answer 3 · answered Sep 20 '18 at 14:31

Have you tried to use media conditions inside sizes? For each media condition put a 100vw.

I used smaller sizes for the testing purpose.

*{
    padding: 0;
    border: 0;
    margin: 0;
}

html {
    width: 100vw;
}

div {
    width: 100vw;
    margin: 0;
    background-color: red;
    font-size: 0;
}

<div>
    <img 
      sizes="(max-width: 720px) 100vw,
            (max-width: 1920px) 100vw,
            (min-width: 1921px) 100vw"
      src="https://via.placeholder.com/350x150" 
      srcset="https://via.placeholder.com/720x150 720w, 
              https://via.placeholder.com/1280x150 1280w, 
              https://via.placeholder.com/1920x150 1920w" 
      alt="picture of emma watson">
<div>

Width of the image displayed is not exactly 100vw when the user agent selects image of width 3200px

3 Answers3