响应图像srcset不工作

Question

我一直在尝试使用以下HTML实现新的srcset方法来响应图像

        <img class="swapImages"
        srcset="assets/images/content/large.jpg 1200w,
                assets/images/content/medium.jpg 800w,
                assets/images/content/small.jpg 400w"
        sizes="100vw"
        src="assets/images/content/small.jpg"
        alt="responsive image">

我使用Chrome 40，我得到的是最大的图像，调整浏览器大小，清除缓存什么都不做。

我在某个地方读到我必须填充的内容，所以我使用了picturefill插件，尽管chrome应该支持它……但仍然不起作用。

我为它整理了一个演示页面：http://www.darrencousins.com/lab/resp-img-srcset/

我做错了什么/没有得到什么？

非常感谢您的帮助。

Answer 1

我刚刚注意到你的演示页面(http://www.darrencousins.com/lab/resp-img-srcset/)从未在Google Chrome（48版）上显示移动版本（即使在调整浏览器大小或使用DevTools-设备模式时）。

将设备像素比更改为1似乎可以加载正确的图像。

我不知道为什么，我想知道w描述符是否考虑了设备像素比

Answer 2

在img标记中使用时，srcset属性将根据TondaCZE提到的要加载的图像由浏览器决定。如果要强制浏览器在指定的视口加载图像，则需要使用picture元素。

<picture>
  <source srcset="large.jpg" media="(min-width: 1200px)" />
  <source srcset="medium.jpg" media="(min-width: 800px)" />
  <img src="small.jpg" />
</picture>

Answer 3

你说得对。

问题是，一旦你的浏览器有了更高分辨率的图片（在缓存中加载），它就没有必要下载低质量的图片，即使你把窗口缩小了（这是为了节省流量）。

因此，如果您想测试这一点，只需将窗口变小，然后加载页面（在清除缓存/或使用匿名模式后）。您将获得手机或平板电脑版本。然后，通过扩大窗口，您将在某个时候看到浏览器切换到更高分辨率的图片。