所述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>
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)