小编Bin*_*_10的帖子

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

所述user-agent选择的图像中的一个下面基于device pixel ratioviewport 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>   
Run Code Online (Sandbox Code Playgroud)

CSS

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

html {
    width: 100vw;
}

div {
    width: 100vw;
    margin: 0;
    background-color: red;
    font-size: 0;
}
Run Code Online (Sandbox Code Playgroud)

更多信息

user agent - firefox on ubuntu
emmaHQbanner.jpg - Resolution (width=3200px , height=642px)
Run Code Online (Sandbox Code Playgroud)

案例分析

viewport (width 300)  (zoom - 100%)  chosen image - 720px …
Run Code Online (Sandbox Code Playgroud)

html firefox html5 image srcset

7
推荐指数
1
解决办法
293
查看次数

标签 统计

firefox ×1

html ×1

html5 ×1

image ×1

srcset ×1