简介
在现代的 Web 开发中，响应式图片已经成为了一个必不可少的组成部分，而 picture 和 srcset 属性则是两种常用的实现方式。但是这并不意味着我们可以轻易地掌握这些概念。
picturefill 是一个小巧的 JavaScript 库，它旨在让使用这两种技术更加简单和可靠。它支持 IE9 及以上版本、所有现代浏览器和移动设备，它可以确保您的网站在不同设备上都能正常显示正确的图像。
本文将详细介绍如何使用 picturefill 这个 npm 包来帮助我们实现响应式图片。
安装
安装 picturefill 有两种方式：
- 在命令行中使用 npm 安装：
npm install picturefill --save
- 或者直接从 GitHub 上下载最新版本，并将其包含在项目中。
使用
一旦安装完成，您需要在 HTML 中引入 picturefill.js 文件（或者 picturefill.min.js），然后为需要响应式网页设计的 <img> 元素添加适当的属性。
属性介绍
以下是 picturefill 支持的几个属性：
| 属性 | 描述 |
|---|---|
data-picture |
它可以包含一个或多个 source 元素，用于指定图片的不同版本。 |
data-alt |
指定图片的替代文本。 |
data-class |
在 JavaScript 中设置 class 属性，以便对图像进行样式控制。 |
data-sizes |
指定图像在不同设备上显示的尺寸。 |
示例
以下是一个使用 picturefill 的示例：
-- -------------------- ---- -------
-----
-------- ----------- --------- ------- --------------------
-------
------------------ --------
------------------
------------------ ------- ------ -------
--
-------
------------------ -------
-------------------
------------------ ------ ------ ------
--
-------
------------------ -------
------------------
------------------ ------ ------ ------
--
---- ------------------ ------ --
----------
------在这个示例中，我们定义了三种不同的图片版本（large.jpg、medium.jpg 和 small.jpg），并使用 media 和 sizes 来指定它们在不同设备上的显示方式。
最后，我们还提供了一个备选方案（fallback.jpg），以确保即使用户的浏览器不支持 picturefill，也能看到一个替代的图片。
总结
使用 picturefill 可以让您更轻松地实现响应式网站，并且可以在不同设备上正常显示图像。它支持 IE9 及以上版本、所有现代浏览器和移动设备，是一个非常好的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32564
