我正在尝试将图片填充插件用于响应式图像，但 usemin 插件似乎没有在<img src=标签之外获取任何 url。有没有办法强制它使用新的缩小/缓存爆破的原始图像更改每次出现的原始图像，如下所示：

在 grunt 构建之前

咕噜声构建后

如果有帮助，这是我的 gruntfile 代码：

I am using the Owl Carousel and Picturefill plugins and I would like to lazy load the main slider images. Any help would be appreciated. In the example url, click on the "Responsive" thumbnail (second image after the YouTube thumbnail). Then expand/contract your browser window and you should see the image referenced being updated depending on the size of the browser.

Example url:

http://dx1showroom.azurewebsites.net/picturefill/2.html

Goals:

• Use Owl Carousel - www.owlcarousel.owlgraphic.com
• With Picturefill - http://scottjehl.github.io/picturefill/
• Sync with second owl carousel slider
• And lazy load main slider

I have working:

• Owl carousels are working
• Synced carousels (main & thumbnail sliders)
• Loading images with Picturefill

HTML:

JavaScript:

我在一大组图像中有一些图像，这些图像具有围绕图像本身的白色（或黑色）边框。我怎样才能...

1. 将图像裁剪为没有所述背景/边框的大小
2. 调整图像大小以填充给定的输出大小居中。

例如，我有一个大小为 1280x1024 像素的上传图像，它有一个白色（或黑色）边框，内部尺寸为 800x700（可能未居中），我想裁剪该边框，然后调整大小以填充640x480 输出。这将有效地拍摄内部图像，然后填充 640x480，有效地从原始图像中裁剪出额外 100 像素的高度。

我更喜欢可以是带有图形魔法的批处理/shell脚本，但也可以通过phantomjs接受解决方案。如果可能的话，我宁愿避免使用其他工具/语言。

我正在尝试将 Picturefill 2.1 与任何可用的延迟加载插件结合起来，但我还没有成功。我在 Google 上找到的大部分代码都是针对 Picturefill 1 的。

这里有没有人做过这个并且可以帮助我？图片填充工作得很好，问题是延迟加载部分，因为我没有图像宽度和高度，这会导致所有图像一次加载。

我创建了画布指针错误。它显示目标到所需位置（鼠标位置）：

http://jsfiddle.net/conmute/rk276q3g/

问题出在 Firefox 渲染中，（移动鼠标非常快）：

http://jsfiddle.net/conmute/rk276q3g/1/

矩形行为怪异，我错过了。谁能指出具体是什么？

状态更新

我解决了这个问题：http: //jsfiddle.net/rk276q3g/2/

通过注释掉 ctx.save() 和 .restore() 并在绘制矩形之前放置箭头图像。

所以实际上我解决了这个问题，但问题是......

问题更新

...如果我在做了一些 ctx.translate(... 和一些图纸之后需要画画怎么办？

我需要使用 ctx.save() 和 .restore() 方法，但这会导致问题。我如何在不评论的情况下完成这项工作？因为当我删除它们时，它解决了问题。

我以为我正确理解了它们的工作原理，但我发现我没有。

更新

似乎通过删除所有ctx.restore()并解决了解决方案，但是当我通过计算先前的位置ctx.save()添加我要绘制的部分后，问题再次出现！translate

请参阅：http: //jsfiddle.net/rk276q3g/5/

我想完成一项简单的任务。
我在可变宽度容器中有一个图像。
容器的宽度可以是 300、400、700 或 900 像素。这是通过媒体查询完成的。图像应该占据该容器的所有宽度。所以它也将是 300、400、700 或 900 像素宽。对于所有宽度值，图像应该有不同的来源。所以我可以在手机上提供较小的图像。

我认为这可以通过元素的srcset属性来完成，也许是在属性的帮助下。像这样的宽度imgsizes

但它不是这样工作的，因为浏览器选择图像的比例与显示端口的宽度成比例，而不是与图像本身的宽度成比例。使用来自http://scottjehl.github.io/picturefill/
的图片填充 polyfill 的示例：http : //codepen.io/HerrSerker/pen/itBJy。这不起作用，因为它将采用下一个尺寸的一个图像。

我当然可以考虑到这一点并将我的 srcset 更改为此

这将在桌面上工作，但在视网膜显示器上失败，因为这里考虑了设备像素比，但方式与媒体查询不同。而且它没有用，因为图像应该知道视口的宽度和相同的宽度以及在编译时的宽度？没门。图像 我在网格系统中使用图像。如果我在桌面设备上的 3 列网格和智能手机上的 1 列网格中，图像具有不同的宽度。这不应该由图像负责计算宽度和视口宽度的比率。

sizes我对这个属性也没有任何运气（这里没有例子）。原因同上。在尺寸属性中，我说根据媒体查询我的图像应该宽多少视口宽度。这太离谱了。图片应该怎么知道？

所以我想出了这个解决方案。我设置了一个data-srcset与 srcset 属性本身语法相同的属性，但使用了自定义 JavaScript 编程。此处示例：http: //codepen.io/HerrSerker/pen/tCqJI

这行得通，但感觉不对。但也许不是，正如规范所说的那样，响应式图像的行为方式就是它的行为方式。但我觉得这是错误的方式。90% 的响应式图像用例不适用于规范。

那我错了吗？我没有以定义的方式使用 srcset 吗？我对规范的理解有误吗？W3C 和 Responsive Images 社区组是否以这种脱离现实的方式思考？

我有一个具有 12 列布局的站点，我正在尝试找出正确使用 srcset 和 sizes 属性来匹配我的设计。

我有一个边箱，它在桌面上跨越 3 列，但在平板电脑和手机尺寸中，它跨越 12 列（100% 宽度）。

我想要的是桌面版本中使用的图像，也可用于移动设备（最大宽度 480 像素），以及用于 481 像素和 781 像素之间的所有内容的特定平板电脑大小的图像。

这是我的代码：

在我的例子中，一直使用 768 版本直到 780px，然后使用默认的 src。但是我如何让它使用 320 版本直到 480px？

关于 Picturefill polyfill 的一些初学者问题：

当我使用src属性时，我注意到 Firefox (33) 和 Safari (7.1) 出现短暂闪烁。这些浏览器发出额外的 HTTP 请求。这是我的代码：

• Picturefill 不应该阻止浏览器下载不必要的图像吗？
• 删除src属性有什么缺点吗？（我知道关闭 JS 或浏览器没有原生响应图像的人根本看不到任何图像，只会看到 alt 文本）
• src缺少属性对 SEO 有什么影响？

我正在使用该元素来响应图像，并为不受支持的浏览器使用图片填充 polyfill。即使在不受支持的浏览器中也一切正常。但是在支持它的 chrome 中，我的 jquery 加载事件并没有持续触发。这是我的代码：

还有我的图片元素：

关于我可以做些什么来让它在 chrome 中正常工作的任何想法？

固定的

不太确定这笔交易是什么，但在负载侦听器下方添加修复了它。即使 setTimeout 为 0，但为了保存，我给了它 10 毫秒。在小超时解决 chrome 问题之前，我已经经历过一些场景。

在我的工作中，我们有自己的框架，我们正在尝试考虑实现响应式图像的最佳方式。图像是从后端代码生成的，我们希望有一个可以解决所有用例的控件。

由于 srcset 似乎是响应式图像的最佳解决方案，而 Picture 似乎解决了另外两种情况（艺术指导和 WebP 和 Jpeg XR 等现代图像格式），我们想看看我们是否可以将它们结合起来。

由于图片元素主要与内部带有媒体查询的元素一起使用，因此它是浏览器在满足某些条件时使用它的指令。

Srcset 然而让浏览器根据一些计算来选择图片。

是否有可能将浏览器的选择保留在图片元素中？

例如像这样的东西。

将不胜感激任何帮助:)