缩小窗口时如何让浏览器从 srcset 中选择更小的图片？

Question

在一个小的浏览器窗口上打开以下代码 sn-p 时，会出现第一张图片。当所述窗口的大小增加时，后者转换为第二张图片。但是，当再次缩小窗口时，我们仍然停留在图 2 中。

<img src="https://picsum.photos/800/400?image=0"
 srcset="https://picsum.photos/800/400?image=0 800w,
         https://picsum.photos/700/350?image=1 700w,
         https://picsum.photos/600/300?image=2 600w,
         https://picsum.photos/500/250?image=3 500w,
         https://picsum.photos/400/200?image=4 400w,
         https://picsum.photos/300/150?image=5 300w,
         https://picsum.photos/200/100?image=6 200w,
         https://picsum.photos/150/75?image=7 150w,
         https://picsum.photos/100/50?image=8 100w"
 sizes="(min-width: 800px) 800px,
        (min-width: 700px) 700px,
        (min-width: 600px) 600px,
        (min-width: 500px) 500px,
        (min-width: 400px) 400px,
        (min-width: 300px) 300px,
        (min-width: 200px) 200px,
        (min-width: 150px) 150px,
        100px">

在这种情况下如何让浏览器切换回图片 1？

Answer 1

这是srcset/sizes 上的一个功能，用于img 标签，您可以阅读in here

在这种情况下，另一种方法是使用picture：

<picture>
  <source media="(min-width: 800px)" srcset="https://picsum.photos/800/400?image=0">
  <source media="(min-width: 700px)" srcset="https://picsum.photos/700/350?image=1">
  <source media="(min-width: 600px)" srcset="https://picsum.photos/600/300?image=2">
  <source media="(min-width: 500px)" srcset="https://picsum.photos/500/250?image=3">
  <source media="(min-width: 400px)" srcset="https://picsum.photos/400/200?image=4">
  <source media="(min-width: 300px)" srcset="https://picsum.photos/300/150?image=5">
  <source media="(min-width: 200px)" srcset="https://picsum.photos/200/100?image=6">
  <source media="(min-width: 150px)" srcset="https://picsum.photos/150/75?image=7">
  <source media="(min-width: 100px)" srcset="https://picsum.photos/100/50?image=8">
  <img src="https://picsum.photos/800/400?image=0" alt="">
</picture>

图片是一种响应式图片方法来控制哪个图片资源 用户代理根据分辨率向用户呈现媒体查询 和/或对特定图像格式的支持