问题标签 [picturefill]

我正在使用 <picture> 元素，并使用 Picturefill 来支持跨浏览器。在 IE10 中（在 9 和 11 中很好），它在普通页面加载时完美运行，但 ctrl+f5 后不显示图像。（如果我随后打开开发工具或更改缩放，以及如果我进行普通刷新，则会加载正确的图像）。

我正在使用 <picture> 如下：

我已经检查了 Picturefill 的演示，甚至在一个与我使用 <picture> 和 srcset 的方式非常接近的示例中，我无法复制此问题，因此它似乎并不是纯粹的 Picturefill 错误。

有没有其他人遇到过这个问题或对如何解决它有任何建议？如果我使用 src 而不是 srcset，它似乎可以工作，但我知道不建议将 src 与 Picturefill 一起使用，因为它会在不支持 srcset 的浏览器中导致双重下载。

fill="url(#mobile)"不使用参考<pattern id="mobile" patternUnits="userSpaceOnUse" width="100%" height="100%"><image xlink:href="http://placehold.it/52.83x69.15" width="22.89" height="35.52" x="123" y="90" /></pattern>

在. srcset_ sizes_ img（我正在使用图片填充，但它遵循原始规范）

我有一个图像，在大屏幕上，它是25em宽度，但在小手机屏幕上，它85%是它的容器，而不是视口。我不想在较小的屏幕上给它一个固定的大小 - 相反我希望它适应它的容器（它是 a div）。我无法弄清楚如何做到这一点。

我也很不高兴我必须将大小和媒体查询硬编码到 HTML 中，而不是将它们放在 CSS 中——它将相同的信息放在两个地方。有没有解决的办法？

我有的：

我想要的是：

我正在使用picture带有 's 的元素source来选择要加载的图像。虽然我可以添加一个load侦听器，但我无法确定加载了哪个图像，因为img标签的src属性和属性都是空的，即使加载时也是如此！

如何确定加载了哪个图像？

设置阶段，您是一个销售产品的电子商务平台。该产品的图像存在于网站的多个位置，如下所示

• 在大约 150x150 像素的轮播中
• 在快速查看显示该产品图像的大约 250x250
• 在该产品的页面上显示该产品的 80x80 缩略图
• 在该产品的页面上显示该图像的全尺寸 300x300
• 在大约 65x65 的快速购物车中
• 在完整的购物车中大约 100x100

您会提供 1 张适用于所有这些地点的图像并希望它被缓存，还是您会提供每个图像的精确尺寸。

考虑到更多的情况，如果用户有一个装满物品的购物车并离开网站并直接回到他们的购物车，他们有一个大购物车要加载，或者用户离开了几天或几周并且有一个完整的看到新的产品集，所以没有更多的缓存图像。

您认为最高效的解决方案是什么？

我试图使 ap 始终具有与放置在它旁边的图像相同的宽度和高度。

我为包含这些元素的两个 div 设置了特定尺寸，然后将 img 宽度和高度设置为 100%（如此处所述）。不幸的是，即使我使用所提供的实际图像的尺寸，这也会导致图像失真。顺便提一下我用的是Picturefill，可能跟这个有关吧。。

我应该提到，通过调整图片填充 HTML 的 size 属性中的值，可以在一定程度上控制失真量。然而事实证明，我必须向该属性添加数千个不同的值才能使其真正以这种方式工作。只是感觉这不是处理此类事情的正确方法。

HTML

如何使用 jQuery 定位图片元素中源标记的 srcset 属性？更改下面的 xxxxxxxxxx.jpg 和 yyyyyyyyyy.jpg 的值的正确 jQuery 代码是什么？

希望有人能解释一下——我有固定列宽的同位素项目，这些项目不是通过视口宽度而是通过用户交互来切换的。

固定图像宽度为 105px、160px、333px 和 1200px。

我想使用图片 srcsets 并根据图像宽度而不是视口来更新源。目前我发现很难看到是否有办法触发这个，或者我是否应该通过 javascript 来做这个。

我的图片 srcset 在视口方面工作正常，但是当一列只有 105 像素并且该宽度的 5 - 12 列可能适合屏幕时，由于视口宽度不是我的功能，它在 1200 像素宽的图像中加载想要而不是提供以及我希望的储蓄。

我已经上下搜索了，并找不到太多可以指出我正确方向的东西。非常感谢任何帮助。

我已经尝试过环顾四周，但似乎找不到任何关于我正在寻找的主题的信息。

如果您熟悉 Unity3D uGUI，我正在尝试使用 Objective-C 在 XCode 内部实现相同的“填充”类型图像效果。

如果我有一个“角色”的褪色图像，然后随着时间的推移，我想在同一位置用一个“填充的角色”图像填充那个“角色”图像。我该如何解决这个问题？

我曾尝试使用 MGImageResizingUtilities 但这似乎改变了图像的大小，因为裁剪后的图像不再与正在使​​用的原始图像的大小相同，并且比例设置为纵横比。

很难找到一个好的例子，但这里有一些东西可以理解。 http://s22.postimg.org/9qghxosox/Screen_Shot_2016_01_30_at_17_08_06.png

这是我尝试使用的一些代码：

这是尝试使用上面的代码完全填充图像的两个屏幕截图，以及一个尝试部分填充图像的屏幕截图（遮罩层框架高度设置为 -40）

先谢谢了

我一直在网上搜索允许picture元素的 jQuery 滑块，但找不到任何元素，所以这是我在构建自己的自定义滑块之前的最后一次尝试。

有谁知道任何允许该picture元素的 jQuery 滑块？