scottjehl/picturefill

最新推荐文章于 2025-11-18 10:29:39 发布

原创最新推荐文章于 2025-11-18 10:29:39 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java

php 专栏收录该内容

30 篇文章

订阅专栏

Picturefill 是一个响应式图片 polyfill 工具，用于在不支持 Picture 元素的浏览器中模拟其行为。它有三个版本，当前稳定版为 3.0.3。该工具有助于解决 Firefox 早期版本的图片更新问题，并提供使用说明、示例和文档。在使用时，需要注意浏览器的限制和一些潜在问题，如避免使用百分比单位等。若发现 bug，可以通过 issue 跟踪。参与贡献可以查看 CONTRIBUTING.md 文件。

Picturefill
A responsive image polyfill.

Authors: See Authors.txt
License: MIT
build-status Join Slack channel picturefill on npm

Picturefill has three versions:

Version 1 mimics the Picture element pattern with span elements. It is no longer maintained.
Version 2 is a lightweight polyfill of the Picture element draft specification.
Version 3.0.3 is the current stable release.
Usage, Demos, Docs
To find out how to use Picturefill, visit the project site.

The gotchas
Be it browser issues, the responsive images specifications, or Picturefill itself, there are a couple gotchas you should be aware of when working with Picturefill:

Firefox 38 and 39 has some bugs [1] [2] [3] where images won’t update on screen resize. These issues are addressed by Picturefill 3.0.0, and was fixed in Firefox 41.

Per the picture spec, using % isn’t allowed in the sizes attribute. Using % will fallback to 100vw.

Trying to use the src attribute in a browser that doesn’t support picture natively can result in a double download. To avoid this, don’t use the src attribute on the img tag:

If you only want to have an image show up at certain sizes, and not show up at others, you will need to use a transparent placeholder gif: Sample pic

Contributing For information on how to contribute code to Picturefill, check out CONTRIBUTING.md

Issues
If you find a bug in Picturefill, please add it to the issue tracker

Discussion
Picturefill discussion takes place via Slack. For an invitation, visit https://pf-slackin.herokuapp.com/

Support
There are currently no known unsupported browsers, provided that you use the markup patterns provided.