数字图像处理中图像缩放原理_如何像中缩放图像

博客平台Medium在其博客页面上使用自定义图像缩放效果 。 每当用户单击图像时，它将自动放大为更大的尺寸。

这是一个很大的效果，并且肯定是Medium所独有的，但是从来没有可以轻易复制的东西。

现在，借助MediumLightbox脚本，它比以往更加容易。 该JS脚本轻巧，易于添加到任何网站或博客中。

如果您想了解其工作原理，可以访问由创作者Davide Calignano主持的实时演示页面 。

他花了一段时间确定了确切的过渡效果和自定义动画效果，以创建Medium图像缩放的镜像 。 整个库是用纯JavaScript，因此它不依赖于任何^第三方脚本，如jQuery的。

您将需要了解一些JS来进行设置，但是您当然不必成为专家。

每个图像都可以使用data- *属性来设置全尺寸的高度和宽度，所有这些属性都是从lightbox插件中动态提取的。 设置代码非常简单，它可以针对图像本身或诸如<figure>元素之类的容器 。

这是使插件运行所需的单个代码段：

MediumLightbox('figure.zoom-effect');

在函数内部，您将通过 .zoom-effect类为所有元素（例如<figure> ） 传递选择器 。 此类是在MediumLightbox样式表中专门定义的，因此，最好在您的页面上也使用该类。

而且，一旦设置完成，就一切就绪！

在页面内容区域中，可以使用此类将所有图像包装到<figure>标记中。 他们会为台式机和移动用户自动获得这种备受喜爱的中型点击放大效果。

要下载此脚本的副本并开始使用，只需访问GitHub主仓库 。 在这里，您还将找到文档以及可复制以快速设置的代码片段 。

翻译自: https://www.hongkiat.com/blog/medium-lightbox-image-zoom/