README

这不是一个 srcset polyfill！

这是什么

从 img 标签的 srcset 标签的概念出发，这将创建一个自定义实现，根据 图像尺寸 而不是浏览器来选择最佳源图像。

这比传统的 srcset 实现有优势

为了使此过程工作，您必须至少强制设置图像的一个维度。一个很好的例子是将图像宽度设置为百分比，高度设置为自动。这将使您的图像能够动态适应布局并使用最合适的图像变体。

要使用库，只需在您的项目中包含 JavaScript 文件。

语法类似于常规 srcset 实现，但是您只能定义高度和宽度的条件

<img src="" data-srcset="image-200.jpg 200w,image-100.jpg 100w,image-50.jpg 50w">

因此，data-srcset 属性的语法为 "filename condition [condition],.."。请注意以下两点

图像处理器将从左到右查找条件并测试条件，如果条件通过，它将使用文件名作为 src 值。将最大的图像放在最后，实际上我们想要使用较小的图像。如果所有条件都失败，将使用第一个文件名。

条件可以采用 'xxxh' 或 'xxxw' 的形式（例如 '100w', '75h'），分别代表高度和宽度要求。它只对匹配强制维度有意义。如果高度是自动的，设置 100h 的条件将没有意义。

只有带有 data-srcset 的图像将被更新。更新发生在您首次加载页面以及浏览器屏幕大小调整时。

如果您通过 AJAX 请求加载内容，您将想要调用 ResponsiveImages.update()，这将触发更新过程的运行，从而更新您的新内容。

像素比是获取高像素密度设备或缩放的浏览器窗口的最佳图像尺寸所需的图像维度系数。

例如，现代移动设备伪造其屏幕宽度，但提供像素比（例如 2.0 或 3.0）。这允许您提供更高分辨率的图像以充分利用其屏幕分辨率。现在缩放后的桌面浏览器需要更少的像素来渲染图像，因此您现在可以提供更低分辨率的图像来完成请求，而不会损失任何质量。

要控制此，您可以设置 ResponsiveImages 对象的 min|max_pixel_ratio 属性。如果您试图优化带宽，您可能希望将 max_pixel_ratio 设置为较低值（例如 1.0），以提供实际图像大小，而不是向物理上小且高分辨率屏幕的设备传输桌面质量的图像。