# Fumadocs UI (the default theme of Fumadocs): 可縮放圖片
URL: /zh-TW/docs/ui/components/image-zoom
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/components/image-zoom.zh-TW.mdx

讓文件中的圖片支援點擊放大檢視

Install to your codebase:

```bash
npx @fumadocs/cli@latest add image-zoom
```

## 使用方式 [#usage]

請在您的 MDX 元件中，將 `img` 替換為 `ImageZoom`。

```tsx title="components/mdx.tsx"
import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultComponents,
    // [!code ++]
    img: (props) => <ImageZoom {...(props as any)} />,
    ...components,
  } satisfies MDXComponents;
}
```

現在，所有圖片都會自動啟用圖片縮放功能。

```mdx
![Test](/banner.png)
```

### 圖片最佳化 [#image-optimization]

在 Next.js 中，若 `<Image />` 元件未指定 [`sizes` 屬性](https://nextjs.org/docs/app/api-reference/components/image#sizes)，系統會自動為其設定預設值。

## Lightbox [#lightbox]

`<Lightbox />` 內的可縮放圖片會在同一個檢視器中開啟，您可以使用方向鍵、滑動手勢或側邊按鈕瀏覽圖片。

<Wrapper>
<Lightbox>
<div className="not-prose grid grid-cols-2 gap-2">
  
<ImageZoom src="/docs/notebook-tab-mode.png" width={1453} height={963} alt="Notebook 版面配置" title="頁籤模式：導覽列" />

  
<ImageZoom src="/docs/notebook-nav-mode.png" width={1451} height={954} alt="Notebook 版面配置" />

</div>
</Lightbox>
</Wrapper>

用它包覆頁面內容，即可瀏覽整個頁面中的所有圖片：

```tsx title="app/docs/[[...slug]]/page.tsx"
import { Lightbox } from 'fumadocs-ui/components/image-zoom';

<DocsBody>
  {/* [!code ++] */}
  <Lightbox>
    <MDX components={getMDXComponents()} />
    {/* [!code ++] */}
  </Lightbox>
</DocsBody>;
```

### 圖說 [#caption]

圖片的標題 (title) 會顯示為圖說。

```mdx
![Notebook Layout](/notebook.png 'Tab mode: navbar')
```

若要加入連結等豐富內容，請傳入 `caption`。

```tsx
<ImageZoom
  src="/notebook.png"
  alt="Notebook Layout"
  caption={
    <>
      See <a href="/docs/ui/layouts/notebook">Notebook Layout</a>
    </>
  }
/>
```

### 圖庫 [#gallery]

若要讓一組圖片可單獨瀏覽，請將它們包在另一個 `<Lightbox />` 中，例如以網格排列：

```mdx
<Lightbox>
<div className="not-prose grid grid-cols-2 gap-2">

![Light Mode](/light.png)

![Dark Mode](/dark.png)

</div>
</Lightbox>
```