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

Question

在小浏览器窗口中打开以下代码片段时，会出现第一张图片。当所述窗口的尺寸增大时，后者过渡到第二张图片。然而，当再次缩小窗口时，我们仍然停留在图 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>

Picture is a responsive images method to control which image resource a user agent presents to a user, based on resolution, media query and/or support for a particular image format