问题标签 [picturefill]

我有两张图片，一张是 1000 x 800 像素（“大”），一张是 200 x 200 像素（“小”）。当屏幕小于或等于 500 CSS 像素宽时，我想使用srcset / sizes / picturefill显示小图像，否则显示大图像。

这是一个稻草人的建议：http: //jsfiddle.net/ghhjfo4z/1/embedded/result/

这在我的 1x 像素密度显示器上运行良好。但是当我切换到我的 2x 像素密度视网膜显示器时，突然间，只有当视口宽度小于或等于 250 CSS 像素时才会显示小图像。

当视口小于或等于 500px 时，有什么方法可以让浏览器在我的 2x 像素密度显示器上使用小图像？

基本上我想忽略设备的像素密度，并使用srcset和/或大小来仅选择基于视口的 CSS 像素宽度的图像。

我需要重新使用图片元素的渲染图像。有没有一种直接的方法可以使用javascript访问chrome/opera渲染的图像文件路径，而不必复制picturefill完成的逻辑。

使用上面的示例，在宽度为 1200px 的视网膜桌面浏览器窗口上，支持图片的浏览器将呈现 head-2x.jpg。或者，如果我在宽度小于 450 像素且带有视网膜显示屏的智能手机上使用 chrome 浏览器，它将使用 head-fb-2x.jpg。如何直接访问这个动态渲染的图像？

有没有一种方法可以访问这个渲染的图像而不必自己解析源元素？

我正在尝试在我使用 Polymer 创建的 Web 组件内部使用由picturefill js library<picture>创建的元素，但它选择了尽可能小的图像，因为它没有从容器元素中获取任何尺寸。<picture>

我曾尝试给 :host 一个 display:block ，在无数其他尝试中使用样式进行此操作，包括确保容器为 100%，但没有任何效果。

这是我正在尝试使用最小图像显示聚合物制成的元素的代码笔，然后<picture>它自己的元素显示正确的图像。

请注意，在实时 codepen 版本中，<hr>由聚合物元素创建的（水平规则）元素是全宽，因此可以理解容器的正确宽度。

这是codepen中的代码：

```

```

非常感谢您对此的任何帮助。

谢谢，斯科特

我们目前正在我们的网站上实施 Picturefill（2.2.0 版）。图片元素如下所示：

如您所见，我们有 5 个来源用于具有复杂媒体查询的单张图片，因为我们考虑了正常的媒体查询和像素比。这样的查询可能如下所示：

现在我想知道这个必须在浏览器中通过正则表达式（如果我错了，请纠正我）分析的巨大查询是否会减慢浏览器的速度，因为如果我们在一个网站上有 10 张图片，就会有 10 X 5 = 50 次这样复杂的 RegEx 计算。

很高兴听到你的想法...... ;)

此致...

我有以下laravel代码：

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

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

我在这里缺少什么吗？

解决方案：

Im using picturefill 2.0 and the picture element with some dynamic urls.

I have created an image that is twice the size and used if I detect a retina display via a cookie.

If no retina is detected then those variables are just the normal sized images.

The problem I'm having is that non-retina macs are loading the <?php echo $desktop; ?> 2x image from the picture element.

If I remove the 2x option from the picture element images load fine.

Shouldn't that image only be loaded by devices with retina displays?

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

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

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

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

我究竟做错了什么？

目前，我正在构建一个通过 JavaScript 设置响应式背景图像的解决方案。我正在使用 Picturefill 创建跨浏览器支持。

我需要什么？我的页面上有一个元素需要一张非常小的背景照片。在页面上有一个图片元素，可以有条件地加载图像。但是，如果浏览器没有适当的图片元素支持，我指定了一个默认图像源。

使用 MooTools 我检查应该在 domready 上显示的照片，在调整窗口大小时我再次检查我的图像“src”以在需要时替换我当前的图片（用更大或更小的图片）。

在 FireFox 中，图片元素替换了 DOM 中的图像 'src'，效果非常好！

Chrome（和 IE）不会替换图像“src”，因此我的照片将始终具有根据 MooTools 的默认照片尺寸。但是，当您通过 Chrome 开发人员工具将鼠标悬停在图像“src”上时，它确实会显示该媒体查询的正确图像源。

我可以得到太多细节，但相信我，我真的需要像上面提到的那样做，谁愿意帮助我呢？:)

感谢您提供可能的解决方案，我非常感谢！

干杯，斯特凡

我正在尝试使用新的图片标签来获得我的图片的响应版本。

出于某种原因，无论我的浏览器宽度如何，都只会执行回退，因为图片宽度设置为它的公式。

我正在使用图片填充来启用跨浏览器兼容性。如果重要的话，这是具有类“col-md-6 col-lg-7”的 bootstrap-3-column 的一部分。我的逻辑错误在哪里？

这就是我所拥有的...