Question

我正在处理具有以下标记的网页：

<img
alt=""
src="/banner_home.300x200.jpg"
srcset="/banner_home.300x200.jpg 320w,
       /banner_home.600x400.jpg 480w,
       /banner_home.728x242.jpg 768w,
       /banner_home.920x306.jpg 960w,
       /banner_home.1234x400.jpg 1280w">

似乎在最新的Chrome＆amp; Opera，他们会忽略任何屏幕尺寸，只输出最后列出的文件（所以我的情况下是1234x400.jpg）。

使用Picturefill，Firefox和Safari都可以在较小的屏幕上显示正确的图像。

在今天的测试中，我推出了Opera，我暂时没有打开。它首次推出时是在v25，它会在较小的屏幕尺寸下显示正确的图像。

然后我注意到已经下载了更新，所以我运行它，更新到v27，然后Opera显示与最新Chrome相同的问题。

所以看来Blink最近发生了一些变化。

其他人可以证实这一点，还是我做错了？

Codepen来说明我的意思。

Answer 1

你持测试错了：D

进入Chrome 40的change意味着当缓存中有高密度资源（例如您示例中的最大可能图像）时，这是可以选择的资源，因为那里有＃39}重新下载一个不同的，分辨率较低的一个是没有意义的。

如果你真的想测试哪些资源在较小的设备中下载（而不是你应该依赖于哪个资源被选中，因为srcset不是那个），你可以在实际设备上进行测试，或者或者，打开隐身会话，调整浏览器大小（或模拟设备），然后加载测试页。

当您可以看到加载了哪个图片时，我还创建了一个slightly clearer test case。

另外：从您的示例中看起来您在srcset中使用不同比例的图像。这不是你应该使用srcset的东西，而是使用<picture>，它提供了关于加载哪个资源的保证，因此你的布局不会因为加载了错误的图像而中断。

当您使用srcset时，没有＆＃34;错误＆＃34;图片。浏览器可以自由选择它认为合适的浏览器（因为它在缓存中，连接性低，用户偏好等等）。

Answer 2

如果将其粘贴到控制台中，您将会看到在浏览器中呈现的图像源。

console.log（jQuery（＆＃39; .your-image-class img＆＃39;）。prop（＆＃39; currentSrc＆＃39;））;

最新的Chrome / Opera会出现srcset错误吗？

2 个答案: