响应式图像srcset无法正常工作 [英] responsive images srcset not working

问题描述

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

I've been trying to implement the new srcset approach to responsive images, using the following HTML

        <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，我得到的是最大的图像，调整浏览器大小，清除缓存什么都没有。

Im using chrome 40 and all I get is the largest image, resizing my browser, clearing the cache does nothing.

我读到了必须填充的地方，所以我使用了picturefill插件，虽然chrome应该支持它.....但仍然无效。

I read somewhere I had to polyfill, so I used the picturefill plugin, although chrome should support it.....still doesn't work.

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

I put together a demo page for it: http://www.darrencousins.com/lab/resp-img-srcset/

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

What am I doing wrong/not getting?

任何帮助都非常受欢迎。

Any help is massively appreciated.

推荐答案

你说得对。

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

The thing is, that once your browser has the higher resolution picture (loaded, in cache), there is no point for it to download lower quality one, even when you make your window smaller (the point of this is to save traffic).

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

So if you want to test this, just make your window smaller and THEN load the page (after clearing the cache / or use incognito mode). You will get the mobile or tablet version. Then by making the window bigger, you'll at some point see your browser switching to higher resolution picture.

这篇关于响应式图像srcset无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！