> For AI agents: the site index is available at https://www.juniortree.com/llms.txt; this page is available as Markdown at https://www.juniortree.com/docs/integrations/image-sets.md.
> 在 MDX 文章中按组切换多张图片

## Page metadata

- **Source URL:** https://www.juniortree.com/docs/integrations/image-sets

# ImageSets 组件

`ImageSets` 用于在文章中把多组图片压缩到同一段落位置展示。每一组可以包含一张或多张图片，读者通过右下角按钮切换组。

```mdx
import ImageSets from '@/components/mdx/ImageSets.astro'

<ImageSets
  columns={2}
  sets={[
    {
      label: '第一组',
      images: [
        { src: 'https://example.com/one.webp', alt: '第一张图' },
        { src: 'https://example.com/two.webp', alt: '第二张图' }
      ]
    },
    {
      label: '第二组',
      images: [
        { src: 'https://example.com/three.webp', alt: '第三张图' },
        { src: 'https://example.com/four.webp', alt: '第四张图' }
      ]
    }
  ]}
/>
```

可选参数：

- `columns`：桌面端每组显示几列，默认 `2`，最大 `4`。
- `ratio`：图片框比例，默认 `16 / 10`；如果希望图片保持原始高度，可以传 `ratio="auto"`。
- `fit`：图片填充方式，默认 `cover`；如果是截图或图表，可以传 `fit="contain"`。
- `maxWidth`：组件最大宽度，默认 `58rem`。
- `initial`：默认显示第几组，从 `1` 开始。