1. 产品
  2.   图片
  3.   JavaScript
  4.   PictureFill
 
  

用于不同 Web 应用程序的 QA 响应式图像 Polyfill API

Picturefill 是一个易于使用、智能且响应迅速的 API，可用于不同的 Web 应用程序，以确保用户看到正确的尺寸、屏幕分辨率等，具体取决于设备。

作为一个响应式图像填充 API，Picturefill 是开源的并且可以免费使用，并且是使用 Javascript 和 HTML 开发的。主要用于应用程序的前端，它可以很好地添加到最终用户可能拥有不同设备来访问应用程序的任何项目中。

Picturefill 为浏览器中的 Picture 和 Img 元素提供额外的支持和功能。这是确保无论您的用户从哪个设备访问您的网站，图像都会自动调整到其屏幕尺寸和分辨率的最简单方法之一。 Picturefill 已针对多种浏览器进行了测试，包括 Safari、Internet Explorer 9、Google Chrome Mozilla Firefox 等。

Previous Next

图片填充入门

通过 NPM 安装 PictureFill 的推荐方式。请使用以下命令进行安装。

通过 NPM 安装 PictureFill

 npm install picturefill

通过免费的 JavaScript API 添加响应式图像

开源 PictureFill 库允许 JavaScript 开发人员将响应式图像添加到他们的站点，包括确保具有高像素密度视口的查看者可以看到高分辨率资产并进行相应调整。同样，您可以为浏览器提供许多相同但大小不同的图像。 Picturefill 将为您的用户当前视口大小、显示密度和网站布局中资产的大小进行整理并提供最佳来源。 Picturefill 还允许开发人员根据用户的视口决定显示哪些图像。借助图片元素，您可以指定各种尺寸、缩放级别、纵横比等。

通过免费 JavaScript API 指定图像断点

Picturefill 的另一个功能是能够为网站上的源图像定义具有不同分辨率选项的特定图像断点。 Picturefill 还提供了为某些格式不支持的图像格式决定后备图像的选项。这样您的网站就不会显示图像显示错误。

浏览器支助

开源Picturefill库为各种类型的浏览器提供了完整的支持。 该图书馆在大量浏览器上进行了测试、如Firefox、谷歌Chrome、因特网探索器、Sfari、歌剧等。 当JavaScript个被禁用时、浏览器可以将其属性文本看作一个完整的回放。 图书馆包括全面支持In9版甚至旧版本。 对于In9及以后、您需要将一个视频元素包装器包装在您的图片标签中的源元素。 下面的例子说明了如何做到这一点。

 中国人