gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 14:18:42 25 4
gpt4 key购买 nike

用户代理 根据设备像素比视口(viewport)大小 选择以下图像之一。但我注意到,只有当用户代理选择./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*)

最佳答案

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

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

关于html - 当用户代理选择宽度为 3200px 的图像时,显示的图像宽度不完全为 100vw,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52290338/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com