html - 谁能看到我在使用此srcset时出错的地方？

我正在建立一个响应式的Wordpress网站。博客供稿中包含一个带有标题和图像的故事列表。图像大小应如下：


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


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

我已经在Google上搜索并阅读了有关大小和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。

谁能看到我想念的东西？我认为这是我最困惑的尺寸。我在媒体查询中添加了已记录的查询，但似乎没有应用？

谢谢！

最佳答案

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

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

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

关于html - 谁能看到我在使用此srcset时出错的地方？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46851203/