问题标签 [srcset]

有什么方法可以禁用 Chrome 中的 srcset 支持以进行测试？我想使用 Chrome 开发工具，并且想模拟一个不支持 srcset 的浏览器。

我有以下laravel代码：

我想要做的是显示宽度 < 600 像素的 600x600 图像，以及宽度 > 600 像素的 410x620 图像。

上面的代码适用于桌面。但在 iPhone（iOS 8.1.2，safari/chrome）上，它会显示 410x620 图像。除了 IE9 - IE11 之外，它可以在不包含Picturefill的情况下正常工作（桌面和移动设备） 。

我在这里缺少什么吗？

解决方案：

当我的页面的小屏幕尺寸以 640 像素宽触发时（我使用的是 Foundation 5），我正在尝试使用 srcset 执行将 1000x400px 图像交换为 640x256px 图像的简单任务。在我指定替代图像的尝试中，浏览器似乎默认为该图像并忽略其他所有内容。顺便说一句，我使用的 alt 尺寸是 999x399px，这样我就可以看到它是否正在显示，而不是我的 1000x400px 主图像。

据我所知，我正在按照有关该主题的各种教程和文章中的指示进行操作，但我无法让它发挥作用。此外，根据我是在 Firefox 还是 Chrome 中预览结果，我会得到不同的行为。我的 Firefox 版本是“34.0.5”，我的 Chrome 版本是“39.0.2171.95 m”。

下面是我的 HTML 示例，并描述了结果。我看不出我做错了什么。似乎没有任何效果。

这个在 Firefox 中显示所有浏览器窗口大小的 1000x400px 图像，除了 Chrome 中丢失的图像图标之外不显示任何内容：

这个在 Firefox 中显示所有浏览器尺寸的 999x399px alt 图像，并在 Chrome 中显示所有浏览器尺寸的 640x256px 小图像。此外，Chrome 中的 640x256 图像仅限于该尺寸，并且不会在较大的浏览器窗口中放大，这与下面的其他示例不同：

这个在 Firefox 和 Chrome 中显示所有浏览器窗口大小的 999x399px alt 图像：

以下两个示例在 Firefox 中显示所有浏览器窗口大小的 1000x400 像素图像，但在 Chrome 中显示所有浏览器窗口大小的 640x256 像素图像。此外，这一次 640x256px 图像被放大以适应所有浏览器窗口大小，这与上面的第二个示例不同：

除了上面的例子，我尝试了 div、图片标签、没有 div 和没有图片标签的所有组合，但没有任何效果。我整天都在做这该死的事情！谁能看到我在这里做错了什么？跨浏览器类型的不一致结果增加了混乱。

如果您能提供帮助，请提前非常感谢。

编辑：我找到了一个适用于 Chrome 的示例，但不适用于 Firefox。我指的是这个页面： http ://www.web3.lu/picture-element-and-sr​​cset-attribute/

该页面的示例是这样的：

我适应了这一点：

我可以看到这个示例略有不同，因为它包含“大小”属性，并且包含图像的最大宽度，但我不知道为什么没有其他工作，尽管显然是如何使用 srcset 属性的示例. 另外我仍然不知道为什么这在 Firefox 中不起作用！在 Firefox 中，它仅以标准（非放大）尺寸显示 640x256px 小图像。

进一步编辑：我已经知道我可以调整上述工作示例，使其在 Firefox 中可以接受但无法操作，除了在 Chrome 中功能齐全。

我上面的最终代码的问题在于，在 Firefox 中（srcset 图像交换不起作用），我被固定大小的 640x256px 图像卡住了，所以它太小而且太单面而弄乱了显示在中等屏幕向上。它显然默认为小图像选项，而不是 src 图像或大图像。

我如何解决这个问题很简单（对于更有经验的用户来说可能很明显）：我只是更改了 srcset 图像的顺序，以便 1000x400px 图像位于第一位。像这样：

现在我的 1000x400px 图像始终显示。虽然这可能不符合“移动优先”的原则，但我无法找到一种方法来放大 640x256px 图像以适应中大屏幕。此外，放大小图像并因此影响其在大屏幕上的质量对我来说比被迫将 1000x400 像素的图像传送到小屏幕上的惩罚更大。

我仍在寻找一种方法使上述最后一个示例也可以在 Firefox 中运行，但无论如何，我希望上面的一些内容对其他初学者有所帮助，如果只是提供一些不起作用的示例。

带有问题解决方案的最终编辑：

感谢下面发布的 Alexander Farkas，我现在找到了解决方案。在此链接上：

https://github.com/aFarkas/respimage

我滚动到名为“带有宽度 w 描述符和尺寸属性的 srcset”的部分，然后我尝试了 Codepen 示例。

这在 Firefox 中运行良好。它执行了图像交换，尽管我确实必须在每个窗口大小（最小的图像除外）刷新浏览器，否则它不会每次都显示交换图像的新大小。

谢谢！

我在 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 也有类似的问题。

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

我正在使用带有响应图像的 Bootstrap。我想通过为浏览器提供多种图像尺寸来优化加载时间。根据这篇文章，像这样使用 srcset 的简单方法有利于让浏览器选择最佳图像尺寸：

我的问题是，将它与 Bootstrap img-responsive类结合起来，即使只需要一张小图片，也会加载一张大尺寸的图片。

此处的代码示例：Bootply。使用 Chrome 进行测试，它内置了对 srcset 的支持！（其他一些浏览器需要 picturefill.js 来识别它。）

如果您复制图像的源（或查看网络选项卡中的 Chrome 开发人员工具），您可以看到 750 宽度的版本被加载并调整为小图像，即使有更小的版本最适合利用。（如果加载图片填充 JS 以支持 img srcset，则在 IE 和 Firefox 中也会发生同样的情况。）

我究竟做错了什么？

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

似乎在最新的 Chrome 和 Opera 中，它们忽略了屏幕大小，只输出最后列出的文件（在我的例子中是 1234x400.jpg）。

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

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

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

因此，Blink 最近似乎发生了一些变化。

其他人可以确认这一点还是我做错了？

Codepen来说明我的意思。

我试图了解该sizes属性在 PictureFill 2.0 polyfill 中的确切用途。以下是一些基本示例：

根据文档：

该sizes语法用于定义跨多个断点的图像大小。srcset然后定义图像数组及其固有大小。

因此该sizes属性定义了跨断点的图像大小。这不就是 CSS 的用途吗？为什么要为图像在 HTML 属性中的显示方式定义类似 CSS 的规则？我在这里想念什么？

在旁注中，为什么官方文件说：

详细了解如何使用新的 srcset 和 sizes 属性超出了本指南的范围...

什么？那让我发笑。那不是文档的用途吗？

我正在创建图像预加载，使用带有 srcset 的不可见 img，因此应根据用户需要的大小预加载图像。这是预加载的功能：

DOM.viewAreaPreload 是一个 jQuery 对象，用于我的预加载图像的不可见容器

我使用 markup.js 进行模板化。这是我的幻灯片模板：

preloadList 是一个数组，包含这样的对象： {presentation: 'first', filename: 'slide01.jpg'}

我期待什么：图像正在加载；onload 仅在图像完全加载时触发。

我会得到什么：所有加载都在半秒左右内触发。我将所有图像请求排入队列，它们是异步加载的，而不是按我需要的顺序加载。

如何仅在图像完全加载时触发 onload 事件？

我试图了解“img”的新“srcset”属性。我已经构建了一个简单的测试页面，但是我从浏览器中看到的行为令人惊讶。

首先，这是测试页面：

我正在使用 Chrome/40.0.2214.115 和 Firefox 35.0（在 Macbook Pro 上）以及 Chrome/40.0.2214.73 和 Safari/600.1.4（在 iPod 上）在 Retina Macbook Pro 和 Retina iPod 上进行测试。我在 Firefox 中打开了 srcset 支持。我正在测试快速连接。

我想看的是各种浏览器是否可以智能地获得适当大小的图像。然而，他们的行为并不像我期望的那样。

对于 iOS 浏览器，我的期望是他们会使用来自 'sizes' 属性的回退值 '100vw'。由于纵向模式下 iPod 的视口宽度为 320 像素，我希望它们选择 288 像素或 420 像素的图像。或者，如果它是 Retina 设备，他们可能会请求 576 像素或 840 像素的图像。相反，Safari 和 Chrome 都请求 1920px 图像。

桌面 Firefox 浏览器发出两个请求。第一个是在“src”属性中指定的默认图像。第二个是 1920 像素的图像。无论当前窗口大小如何，它总是请求最大的图像。

桌面 Chrome 最接近实际展示我认为正确的行为，尽管这很古怪。如果我的测试文件是本地的，它总是抓取 1920 像素的图像，而不管视口大小。如果我将测试文件放在远程服务器上，它会表现出对 1152px 图像的普遍偏好（即使图像应该以 960px 呈现，这使得 1920px 成为 2x 设备的逻辑选择）。如果我清除 Chrome 的缓存并调整窗口大小，然后重新加载，它有时会请求较小的图像。

如果我看到的是这些浏览器的预期行为，考虑到每个浏览器的当前支持状态，那么我很清楚我可能不应该提供更高分辨率的图像——更好地提供看起来更少的图像在 2x 显示器上比通过可能很慢的连接在移动设备上转储巨型 J​​PEG 更完美。如果 Firefox 总是要拉出默认图像，那么我可能应该把它变小而不是变大。

我的代码是否存在导致这些行为的问题？如果没有，是否有任何当前使用 srcset 的最佳实践来应对各种当前实现的特质，利用该功能的可能性而不导致下载过大的图像？