谁能看到我在这个 srcset 上哪里出了问题？答案

【问题标题】：Can anyone see where I'm going wrong with this srcset?谁能看到我在这个 srcset 上哪里出了问题？
【发布时间】：2017-10-20 14:23:06
【问题描述】：

我正在构建一个响应式 Wordpress 网站。博客提要有一个包含标题和图像的故事列表。图片尺寸如下：

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

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

我已经用谷歌搜索并阅读了关于尺寸和 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。

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

谢谢！

【问题讨论】：

请分享您的生成的标记。 PHP是服务端语言，无法通过代码sn-p渲染。
嗨！我已经更新它以使用 placekitten 图像，但我不确定它是否有效？我只让它在本地运行，所以代码只是我正在使用的一个例子。
您使用的是哪种浏览器？您在问题中的代码对我有用。

标签： html css wordpress srcset

【解决方案1】：

请注意，<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>

【讨论】：

感谢您的回复！不幸的是，我尝试复制和粘贴该代码只是为了测试，当我的浏览器低于 479 像素时，它仍然显示 360 像素宽的代码。这就是我在逻辑上认为它应该工作的方式 - 高达 479 像素然后使用 140 像素图像，480 像素及以上然后使用 360 像素图像，但它似乎只是忽略了它。我也尝试过隐身模式，以防它正在缓存但没有运气！
@AliGreen 可以，但您必须先以较低的分辨率对其进行测试并清除缓存。想一想：当浏览器有更高分辨率版本的图片时，即使缩小视口，它也不会希望缩小到更小的图像。
我在视网膜 Macbook pro 上进行测试 - 不是 2 倍分辨率吗？我认为这可能是问题所在，但我以 130 像素宽度（使用响应工具）检查了 Chrome，但仍然以 360 像素宽度出现 - 非常奇怪！ imgur.com/a/RVLjx
@AliGreen 您可能应该改用<picture> 元素：请参阅我的更新答案。 <img> 元素上的 srcset 属性仅用于告诉浏览器在运行时加载哪个图像。
谢谢 - 在 Chrome 中有效！唯一的问题是它在 IE11 中不起作用，但它是 picturefill polyfill 不是吗？

【解决方案2】：

查看下面的代码。

<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>

【讨论】：