scottjehl/picturefill
Fork: 1071 Star: 9881 (更新于 2024-12-04 20:04:56)
license: MIT
Language: JavaScript .
A responsive image polyfill for
最后发布版本: 3.0.3 ( 2017-03-21 01:27:59)
Picturefill
A responsive image polyfill.
- Authors: See Authors.txt
- License: MIT
This project is archived and deprecated!
At the time, it helped us transition to responsive image HTML patterns until browsers supported them. Support and fallback strategies are now very good, and this project is no longer needed or recommended. Thanks everyone!`
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 thesizes
attribute. Using%
will fallback to100vw
. -
Trying to use the
src
attribute in a browser that doesn't supportpicture
natively can result in a double download. To avoid this, don't use thesrc
attribute on theimg
tag:
<picture>
<source srcset="../img/sample.svg" media="(min-width: 768px)" />
<img srcset="default.png" alt="Sample pic" />
</picture>
- 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:
<picture>
<source srcset="../img/sample.svg" media="(min-width: 768px)" />
<img srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
alt="Sample pic" />
</picture>
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.
最近版本更新:(数据更新于 2024-10-08 09:19:57)
2017-03-21 01:27:59 3.0.3
2016-02-13 02:03:25 3.0.2
2015-10-01 02:59:23 3.0.1
2015-10-01 02:25:55 3.0.0
2015-09-09 02:00:09 3.0.0-rc1
2015-07-11 01:52:33 3.0.0-beta1
2015-04-28 03:45:33 2.3.1
2015-03-24 04:27:13 2.3.0
2015-02-12 06:08:41 2.3.0-beta
2014-11-20 00:34:13 2.2.0
scottjehl/picturefill同语言 JavaScript最近更新仓库
2024-12-22 13:19:55 gethomepage/homepage
2024-12-22 11:34:40 chris81605/Degrees-of-Lewdity_Cheat_Extended
2024-12-22 00:44:14 gorhill/uBlock
2024-12-21 12:14:02 layui/layui
2024-12-21 03:44:01 emberjs/ember.js
2024-12-20 02:57:09 nodejs/node