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

Admin 1
Viewed 2005

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*)
srcset firefox image html
3 Answers

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.

Admin1

use max-width in css to prevent scroll

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

or you can use 

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

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>

user_71328350
Related