图srcset和size属性

Question

我正在尝试使用img标签创建一个简单的网站，该网站将使用new srcset属性。主要思想是根据屏幕分辨率更改图像（src）。

工作实例

问题出在sizes。如您所见，现在是100vw，但无法正常工作。对我而言，它将img的大小调整为屏幕的大约80％，而不是100％。最好的是，当我用CSS编写imgtag时width: 100vw，它将调整为屏幕的100％。

有人可以帮我吗？也许我做错了什么？

Answer 1

图像的宽度为1152像素，但是您告诉浏览器它的宽度为1500像素（1500w）。然后，浏览器根据您所讲的内容确定图像的密度，并相应地校正图像的固有尺寸，但是由于它使用了错误的密度计算值，因此图像占据了视口宽度的76.8％，而不是视口宽度的100％。

要对此进行更改，您可以为浏览器提供更大的资源，或者告诉浏览器该资源为1152w。