响应式图像 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.

我在某个地方读到了我不得不 polyfill，所以我使用了图片填充插件，尽管 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?

非常感谢任何帮助.

推荐答案

你说得对.

问题是，一旦您的浏览器具有更高分辨率的图片(已加载，在缓存中)，即使您将窗口变小，它也没有必要下载较低质量的图片(这样做的目的是为了节省交通).

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

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

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