无法获取srcset来加载正确的图像

Question

我正在使用下面的HTML＆amp;使用Chrome进行测试，但无论浏览器的宽度如何（使用响应式开发工具时），始终会加载150x150图像。如果我正确理解它，我认为当浏览器宽度低于150px时，它会加载60x60图像吗？

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

Answer 1

它总是加载150px图像，因为这是您在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">

如果完整视口（100vw属性中的sizes）介于60和150px之间，接近60而不是150，则浏览器将加载60px图像，具体取决于浏览器的实现。

如果视口是61px，加载更大的150px图像是没有意义的，所以应该下载60px。

但如果视口为149px，则放大的60px图像看起来很难看，因此应该下载150px图像。

至少在Chrome中是如何实现的。