任何人都可以看到这个 srcset 哪里出了问题吗？

Question

我正在构建一个响应式 Wordpress 网站。博客提要有一个故事列表，其中有一个标题和一张图片。图片大小应如下：

最大 479 像素宽 - 140x140 像素（故事显示在列表中）
超过 480 像素宽 - 360x190 像素（故事以 3 行显示）

我一直在尝试为此使用 SRCSET，以便为最大 479px 的浏览器加载 140x140px 图像，为 480px 及以上的浏览器加载 360px 图像。

我用谷歌搜索并阅读了所有关于大小和 srcset 的文档，但我就是无法理解它。到目前为止，我已经想出了以下内容：

<img
  src="http://placekitten.com/140/140"
  srcset="
    http://placekitten.com/140/140 140w,
    http://placekitten.com/360/190 360w"
  sizes="
    (max-width: 479px) 140px,
    (min-width: 480px) 360px,
    100vw"
  alt=""
  class="lazyload"
/>

不幸的是，尽管图像的实际 src 被设置为 140x140px 图像，但所有这一切都在每个宽度显示 360x190px。

谁能看到我错过了什么？我认为这是我最困惑的尺寸。我添加了记录的媒体查询，但它们似乎没有应用？

谢谢！

Answer 1

查看下面的代码。

<picture>
              <source class="img-fluid" srcset="//www.fillmurray.com/140/140" media="(max-width: 479px)"><img class="img-fluid" src="//www.fillmurray.com/360/190">
            </picture>

Answer 2

请注意，<img> 元素上的此 srcset 策略取决于 浏览器尚未缓存图像 这一事实。此策略旨在为浏览器节省带宽。因此，如果您从宽视口开始，浏览器只会获取两张图片中较大的一张，即使您调整大小也不会再回退到较小的一张。

如果您想强制浏览器在各种视口断点处加载图像，请改用<picture>：

 <picture alt="" class="lazyload">
  <source srcset="https://via.placeholder.com/360x190" media="(min-width: 480px)" />
  <img src="https://via.placeholder.com/140x140" />
 </picture>

任何人都可以看到这个 srcset 哪里出了问题吗？

Can anyone see where I'm going wrong with this srcset?

html

css

wordpress

srcset