17

我在 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（都使用图片填充）中没有任何问题。

iOS Chrome 也有类似的问题。

我的语法错了吗？有什么我不知道的事情吗？

4

1 回答 1

40

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

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

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

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

img[srcset]对于分辨率切换也是如此picture，对于对您的设计做出反应的不同图像也是如此

于 2015-01-26T23:36:48.447 回答