Bin*_*_10 7 html firefox html5 image srcset
所述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*)
小智 3
我发现显示的额外宽度是因为我提供了不正确的像素宽度3200w而不是3607w图像的像素宽度./emmaHQbanner.jpg。（其他图像宽度是准确的）
我了解到srcset图像属性中指定的宽度必须准确。用户代理假设它是正确的，并根据作者指定的值计算渲染宽度。
| 归档时间： |
|
| 查看次数： |
293 次 |
| 最近记录： |