**Image Enlarge** 機能は、単独のブロックレベル画像を、非表示の拡大ボタンを備えた `<figure>` でラップします。画像が描画されるカラムより大きい場合、ボタンが表示され、画像をクリックすると全画面のライトボックスで開きます。

:::note Opt-in 機能

`zfb.config.ts` の `imageEnlarge` フィールドで有効化します。

```ts title="zfb.config.ts"
export default defineConfig(
  zudoDoc({
    imageEnlarge: true,
  }),
);
```

:::

:::note `markdown.features.*` キーではなく設定フィールドで設定する理由

他のオプトイン Markdown 機能とは異なり、Image Enlarge は `zfb.config.ts` の `markdown.features` 配下では設定しません。zfb は組み込みの `markdown.features.imageEnlarge` 機能を `0.1.0-next.18` で完全に削除しており、今これを設定すると **Rust の設定ローダーが失敗する未知のキー**になります。zudo-doc はこの挙動を、パッケージの `@takazudo/zudo-doc/mdx-components` ファクトリに組み込まれた MDX の段落（`p`）コンポーネントのオーバーライドとしてユーザーランドで再実装しており、条件を満たすブロック画像に対して `<figure class="zd-enlargeable">` マークアップを出力します。このオーバーライドは解決済みの `imageEnlarge` 設定値を参照するため、この画像機能だけが Markdown パイプライン設定ではなくトップレベルの設定フィールドで切り替える唯一の機能になっています。

:::

## 構文

特別な構文は不要です。通常の Markdown 画像を単独の行に書くだけです（その画像 1 枚だけを含む段落にします）。

```md
![A wide placeholder image](/img/image-enlarge/image-wide.webp)
```

## ライブデモ

以下の画像はコンテンツカラムより横幅が広いため、拡大ボタンが表示され、画像がクリック可能になります。クリックすると全画面表示が開きます。

![A wide placeholder image](/img/image-enlarge/image-wide.webp)

## オプトアウト

特定の画像のラップをスキップするには、Markdown のタイトル属性に `"no-enlarge"` を指定します。このセンチネル属性は描画前に取り除かれるため、最終的な DOM には現れません。

```md
![alt text](./image.png "no-enlarge")
```

## 出力されるマークアップ

条件を満たした画像は次のようにラップされます。

```html
<figure class="zd-enlargeable">
  <img src="photo.png" alt="..." />
  <button type="button" class="zd-enlarge-btn" aria-label="Enlarge image" hidden>
    <!-- expand SVG icon -->
  </button>
</figure>
```

## メモ

- ラップされるのは**単一**の画像を含む段落のみです。リンクや `<picture>` 要素の中にある画像、テキストと同じ段落にある画像はスキップされます。
- クライアントアイランドが描画後のサイズを画像の固有幅（デバイスピクセル比を考慮）と比較し、画像が本当にカラムより大きいときだけボタンを表示します。

## 関連ページ

- [Image Enlarge コンポーネント](https://zudo-doc.takazudomodular.com/ja/docs/components/image-enlarge) — 拡大ボタンとフルスクリーンダイアログのビジュアル・操作面のショーケース