# 图片缩放

在 VuePress 中,可以通过插件实现点击图片放大的功能。一个常用的插件是 @vuepress/plugin-medium-zoom。它可以让你在点击图片时进行放大。

步骤

1.安装插件: 首先,需要在 VuePress 项目中安装 @vuepress/plugin-medium-zoom 插件。打开终端并运行以下命令:

npm install @vuepress/plugin-medium-zoom

2.配置插件: 在 VuePress 项目的 .vuepress/config.js 文件中,添加并配置 @vuepress/plugin-medium-zoom 插件。

module.exports = {
  plugins: [
    '@vuepress/plugin-medium-zoom',
  ],
}

你也可以根据需求配置 selector 或 options:

    module.exports = {
      plugins: [
        ['@vuepress/plugin-medium-zoom', {
          selector: 'img', // 选择器,默认为 'img',可以指定某些图片元素
          options: {
            margin: 16, // 图片周围的边距
            background: '#BADA55', // 背景颜色
            scrollOffset: 40, // 偏移量
          },
        }],
      ],
    }

使用: 只要你在 Markdown 文件中插入图片(例如:Alt Text),就会自动启用放大功能。点击图片后,图片会放大显示。

这样配置之后,VuePress 中的图片就可以点击放大了。如果需要更细致的控制,可以调整 plugin-medium-zoom 的选项。