3

我有以下图像标签，使用srcsetandsizes属性插入响应式图像：

<img srcset="/designed/logo-abihaus-1600x500.png 1600w,
             /designed/logo-abihaus-1200x375.png 1200w,
             /designed/logo-abihaus-960x300.png 960w,
             /designed/logo-abihaus-800x250.png 800w,
             /designed/logo-abihaus-480x150.png 480w"
        src="/designed/logo-abihaus-1600x500.png"
        sizes="100vw" alt="">

据我了解，我只是告诉浏览器所有可用的图像大小，它应该只下载基于视口大小等最合理的大小。如果我将浏览器窗口（Chrome）的大小调整为小并刷新页面，“网络”选项卡告诉我，它同时下载了我期望的图像（在这种情况下为 800 像素）以及最大的图像（我从src属性中假设）。

在此处输入图像描述

我已经尝试过使用和不使用 picturefill.js，并且我在 OS X 10.10.5 上使用 Chrome 45，所以我认为这不是浏览器兼容性问题。我的语法有什么问题还是我只是误解了 srcset？

4

1 回答 1

2

这是 Blink 渲染引擎中的浏览器错误。

<meta name=viewport content="width=device-width">如果您的 HTML 中有标签，则该错误应在 Chrome 46 中修复。

如果你不这样做，那是一个仍然存在的错误，我希望尽快解决。

于 2015-10-05T08:40:39.953 回答