scottjehl/picturefill

此包已被弃用，不再维护。未建议替代包。

响应式图片polyfill，支持 <picture>、srcset、sizes 等。

维护者

详细信息

github.com/scottjehl/picturefill

主页

源代码

问题

安装数: 23 117

依赖项: 1

建议者: 0

安全性: 0

星星: 10 029

关注者: 354

分支: 1 128

开放问题: 1

语言:JavaScript

类型:组件

3.0.3 2017-03-20 17:12 UTC

MIT ba62a7dfc0530d9d4e9c0287facf5edb77e96193

This package is not auto-updated.

Last update: 2022-09-07 00:39:30 UTC

README

A 响应式图片 polyfill。

此项目已归档并弃用！

当时，它帮助我们过渡到响应式图片HTML模式，直到浏览器支持它们。现在支持回退策略非常好，此项目不再需要或推荐。谢谢大家！

build-status Join Slack channel picturefill on npm

Picturefill有三个版本

  • 版本1使用 span 元素模仿 Picture 元素模式。它不再维护。
  • 版本2是 Picture 元素草案规范 的轻量级polyfill。
  • 版本3.0.3是当前稳定版本。

使用、演示、文档

要了解如何使用Picturefill，请访问 项目网站。

注意事项

无论是浏览器问题、响应式图片规范还是Picturefill本身，在处理Picturefill时，您应该注意以下几个问题

  • Firefox 38和39存在一些错误 [1] [2] [3]，在屏幕尺寸调整时图像不会更新。这些问题在Picturefill 3.0.0中得到解决，并在Firefox 41中得到修复。

  • 根据 picture 规范，sizes 属性中不允许使用 %。使用 % 将回退到 100vw。

  • 在不支持 picture 的浏览器中尝试使用 src 属性可能导致双重下载。为了避免这种情况，不要在 img 标签上使用 src 属性

<picture>
    <source srcset="../img/sample.svg" media="(min-width: 768px)" />
    <img srcset="default.png" alt="Sample pic" />
</picture>
  • 如果您只想在特定尺寸下显示图像，而不在其他尺寸下显示，则需要使用透明占位符gif
<picture>
    <source srcset="../img/sample.svg" media="(min-width: 768px)" />
    <img srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt="Sample pic" />
</picture>

贡献

有关如何向Picturefill贡献代码的信息，请参阅 CONTRIBUTING.md

问题

如果您在Picturefill中找到一个错误，请将其添加到 问题跟踪器

讨论

图片填充讨论通过Slack进行。要获取邀请，请访问 https://pf-slackin.herokuapp.com/

支持

只要使用提供的标记模式，目前没有已知的不受支持的浏览器。