当用户代理选择宽度为 3200px 的图像时，显示的图像宽度不完全为 100vw

Question

user-agent根据device pixel ratio和viewport size选择下面一张图片。但我注意到，只有当用户代理选择 ./emmaHQbanner.jpg 时，显示的图像宽度才不完全是 100vw，而是略多于此。我不明白为什么？

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;
}

更多信息

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

案例研究

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

Answer 1

在css中使用最大宽度来防止滚动

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

或者您可以使用

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

Answer 2

您是否尝试过在 sizes 中使用媒体条件？对于每个媒体条件，放一个 100vw.

出于测试目的，我使用了较小的尺寸。

*{
    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>

Answer 3

我发现显示的 额外宽度 是因为我为图像提供了不正确的像素宽度 3200w 而不是 3607w ./emmaHQbanner.jpg。（其他图片宽度准确）

我了解到图像的 srcset 属性中指定的宽度必须准确。 用户代理假设它是正确的并根据作者指定的值计算渲染宽度。

当用户代理选择宽度为 3200px 的图像时，显示的图像宽度不完全为 100vw

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

html

firefox

image

srcset