使用ResponsifyJS轻松制作响应式图像

现代化的网络应具有100％的响应速度，而更新的库正日益使这成为可能。

使用免费的插件（例如ResponsifyJS） ，可以使您的网站在所有设备上都能正常工作。 这个免费的jQuery插件可容纳一个图像容器，并根据屏幕尺寸的变化动态地重新排列它们 。

由于不同的容器保存图像的方式不同 ，因此它们可以以非常奇怪的方式调整大小。 有时，您会看到人的照片，并且在移动设备上调整尺寸时，他们的脸会被剪掉。

已创建Responsify插件来解决此确切问题。 它可以自动工作，但真正的魔力在于在图片上定义自己的对焦区域 。

它使用内部的十进制描述系统来查找图像的焦点应在哪里。 例如，您可以定义诸如data-focus-top 位置 ，以“遮挡”图像的特定片段。

此数据需要以小数形式传递，例如0.5的小数目标是图像的50％（左/右或上/下）。 自然地，这是很难做到的。 但是，有一个免费的Responsify应用程序 ，可让您在浏览器中动态计算位置 。

只需上传图片，定义焦点区域，然后将图像代码复制/粘贴到您的网站即可。 Responsify插件将具有在较小的屏幕上正确调整图像大小所需的所有数据。

您可以在GitHub存储库中找到很多实时演示链接 ，包括用于复制/粘贴到您的站点中的代码片段。

这个插件并不是每个项目的完美解决方案。 有时，您可能希望调整图像大小而没有固定的焦点区域。 但是，如果您使用的是带有jQuery的砌体网格，则将ResponsifyJS添加到您的堆栈中也没有什么坏处。

要了解更多信息，请访问插件主页以获取实时演示，下载链接和完整的安装指南。

翻译自: https://www.hongkiat.com/blog/build-responsive-images-responsifyjs/