html - 谷歌浏览器 40 版 srcset 属性问题

Question

我发现 Chrome 40.0.2214.91 中 img 标签(响应式图片)的 srcset 属性有很多不一致

在我更新到 Chrome v40(我在 ~39)之前，srcset 属性工作正常并且会在浏览器调整大小时交换图像。现在，有时，如果我将浏览器设置为所需的宽度然后刷新页面，则会显示较小版本的图像。其他时候它不会工作。

测试jsbin: http://jsbin.com/hulaconake/1/edit?html,output

我有图片标签:

<img srcset="http://placehold.it/300x200 300w, http://placehold.it/500x400 500w">

我还在另一个环境中用非 Placehold.it 图像测试这个，并使用 Picturefill.js http://scottjehl.github.io/picturefill/

我在 FF 或 Safari(都使用 picturefill)中没有遇到任何问题。

iOS Chrome 也有类似的问题。

我的语法错了吗？是不是发生了什么我不知道的事情？

Answer 1

这是一项功能，而不是错误。 Chrome 不会切换大小，因为 Chrome 已经在缓存中有一个更大的图像，所以不需要下载相同图像的新数据。

如果您想使用不同的图像或相同的图像进行不同的裁剪，请使用图片元素。

响应式图片在技术上可以区分为两种类型。

• 带有源描述符的 srcset(让浏览器根据屏幕尺寸/分辨率、带宽选择正确的图像……):
  • 密度描述符 (x)(对于静态图像尺寸，Retina 与正常分辨率)
  • 宽度描述符 (w) 和相应的尺寸属性(用于灵活、响应式/自适应图像(自动还包括 Retina 优化)
• 以及带有其 source[media] 子元素的图片元素(使作者能够根据特定的媒体查询控制浏览器应选择的 srcset)

所以 img[srcset] 用于分辨率切换，picture 用于响应您的设计的不同图像