Question

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

最大宽度为479px - 140x140px（故事以列表形式显示）
超过480px宽度 - 360x190px（故事连续显示为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"
/>

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

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

谢谢！

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

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

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

＆＃13;

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

＆＃13;

任何人都可以看到我在这个srcset出错了吗？

2 个答案: