在制作响应式网站时，图片的适配问题经常是非常头疼的一个问题。一般而言，我们可以使用 CSS 的 background-image 属性来控制不同分辨率设备下的图片显示效果。但是，当我们需要实现图片在 HTML 中的 src 属性上的适配时，就要使用到 srcset 属性了。
srcset 是一个 HTML 属性，用来传递多个可选的图片文件路径给浏览器，让其根据不同的设备特性来合理的选择最合适的图片。然而，为了实现 srcset 适配，我们需要手动针对不同分辨率设备生成不同大小的图片，这样会占用很多时间，并且会产生很多重复劳动。
幸运的是，我们可以使用 gulp-image-set-plus 这个 npm 包来解决这个问题。gulp-image-set-plus 可以自动根据需要生成不同分辨率下的图片，并输出 <img> 标签中 srcset 属性所需要的内容。在本文中，我们将使用 gulp-image-set-plus 来实现网页图片适配问题。
安装
首先，我们需要在项目目录下通过以下代码，安装 gulp-image-set-plus：
npm install --save-dev gulp-image-set-plus
同时，为了实现图片的裁切和调用，我们还需要安装以下依赖包：
npm install --save-dev gulp npm install --save-dev gulp-plumber npm install --save-dev gulp-image
使用
准备工作
安装完毕后，我们需要在项目根目录下，创建一个 gulpfile.js 文件，用于编写 gulp 任务。在 gulpfile.js 文件中，我们还要同时导入 gulp、gulp-plumber、gulp-image 和 gulp-image-set-plus：
const gulp = require('gulp');
const plumber = require('gulp-plumber');
const image = require('gulp-image');
const imageSet = require('gulp-image-set-plus');生成图片并调用
假设我们在项目中有一个名为 images 的文件夹，这个文件夹下的所有图片都需要被适配为 srcset 属性。我们可以通过以下代码来执行任务：
-- -------------------- ---- -------
---------------- -------- -- -
------ ------------------------------------
----------------
-------------
--------- -----
-------- ------
---------- -----
--------------- ------
-------- -----
-------- ------
--------- -----
----- -----
------ ----
---
----------------
------ --- ---- -- ---
---------- ------ ------
------------ -
-
----- --------
------ ----
----- ---
--
-
----- ---------
------ -----
----- ---
--
-
----- --------
------ -----
----- ---
-
--
-------- -----
-------------- ----
---------- ---
---
--------------------------------
---这段代码会执行以下主要的步骤：
- 选取
images目录中所有.png、.jpg和.jpeg格式的图片文件。 - 通过
gulp-image插件将图片进行优化。 - 使用
gulp-image-set-plus生成不同分辨率的图片，并输出srcset属性所需的文件内容。 - 将生成的文件输出到
dist/images目录中。
输出代码示例
经过 gulp-image-set-plus 的处理后，我们会得到如下的代码示例：
<img src="images/cat.png" srcset="images/cat@2x.png 2x, images/cat@3x.png 3x" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 200px, 300px" alt="cat" />
这个代码示例中，我们选取了一张名为 cat.png 的图片，并设置了图片的适配规则。src 属性指向原始的图片路径，srcset 属性指向不同分辨率下的图片路径，sizes 属性则表示屏幕的不同适配规则。
总结
通过 gulp-image-set-plus，我们可以很方便地实现网页图片适配问题。当然，除了 srcset 属性以外，我们还可以使用 picture 标签来制定更加复杂的图片适配规则，但这就需要更多的代码工作。希望这篇文章能够帮助到你，感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005684781e8991b448e4542