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

Question

我正在使用下面的 HTML 并使用 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

它总是加载 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">

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

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

但是如果视口为149px，放大后的60px图片会很难看，所以应该下载150px的。

至少在 Chrome 中是这样实现的。

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

Cannot get srcset to load correct image

html

responsive-images

srcset