无法获得srcset加载正确的图像

Question

我使用的HTML以下&（使用响应开发工具时），150×150的图像总是被加载使用Chrome，但无论是浏览器的宽度测试。如果我正确理解它，我认为当浏览器宽度小于150像素时，它会加载60x60图像？

<a href="/"> 
    <img src="https://dummyimage.com/60x60/000/fff" 
    sizes="100vw" 
    srcset="https://dummyimage.com/150x150/000/fff 150w"> 
</a> 

Answer 1

它始终加载150像素的图像，因为这是您在srcset属性中列出的唯一一个图像。

这里是你应该做的：

<img 
    src="https://dummyimage.com/60x60/000/fff" 
    sizes="100vw" 
    srcset="https://dummyimage.com/60x60/000/fff 60w, 
      https://dummyimage.com/150x150/000/fff 150w"> 

浏览器将然后加载60像素图像，如果全视（100vw在sizes属性）是介于60至150像素，接近60比150，取决于浏览器的实现。

如果视是61px，那就没有什么意义载入真正做大像素的图片，所以60像素应该下载。

但如果视口是149px，放大60像素的图像会显得难看，所以为150px一者应下载。

这至少是如何在浏览器中实现。