# 图片

您可以将图片插入到页面中，然后选择其大小，以及是否左对齐、居中或右对齐。您还可以选择在图片块中添加替代文本和/或说明文字。

{% hint style="info" %}
**提示：** 出于无障碍考虑，我们建议为图片设置替代文本。
{% endhint %}

### 图片块示例 <a href="#example-of-an-image-block" id="example-of-an-image-block"></a>

<div align="center"><figure><img src="https://images.unsplash.com/photo-1446776709462-d6b525c57bd3?crop=entropy&#x26;cs=srgb&#x26;fm=jpg&#x26;ixid=M3wxOTcwMjR8MHwxfHNlYXJjaHwyfHxzcGFjZXxlbnwwfHx8fDE3MzMxOTY5NTR8MA&#x26;ixlib=rb-4.0.3&#x26;q=85" alt="A photograph taken from space looking back towards Earth. A satellite is in the foreground, and in the background is an ocean-covered part of our planet with patchy clouds."><figcaption><p>带说明文字的图片块示例</p></figcaption></figure></div>

### 上传图片

向内容中添加图片有两种方式：

1. 将图片从文件管理系统中直接拖放到页面上的空白块中。
2. [添加图片块](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/zh/creating-content/blocks/..#inserting-a-new-content-block) 到您的页面中，并使用 **选择图片** 侧边栏，它会显示在窗口右侧。

如果您采用第二种方式，您可以选择上传文件、选择之前上传的文件、粘贴图片 URL，或从 [Unsplash](https://unsplash.com/) 使用内置搜索添加图片。

{% hint style="warning" %}
GitBook 允许您上传单个文件大小不超过 100MB 的图片。
{% endhint %}

#### 创建图片画廊

在图片块中添加多于一张图片会创建一个画廊。要这样做，请打开该块的 **选项菜单** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture> 并选择 **添加图片…** 以再次打开 **选择图片** 侧边栏。

要从画廊中删除图片，请打开要删除的图片上的 **编辑菜单** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FA3OfGjPkE5GnOQvN36jN%2Fedit.svg?alt=media&#x26;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></picture> 并按下 **删除 ⌫** 键。

### 添加浅色和深色模式图片 <a href="#light-and-dark-mode" id="light-and-dark-mode"></a>

您可以为已发布站点的浅色和深色模式版本设置不同的图片。GitBook 会根据访客所处的模式自动显示正确的图片。

要为深色模式添加图片，请将鼠标悬停在图片上，打开 **编辑菜单** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FA3OfGjPkE5GnOQvN36jN%2Fedit.svg?alt=media&#x26;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></picture> 并点击 **替换图片** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F0mPo1tPDFeEbPOr1gc4V%2Freplace%20image.svg?alt=media&#x26;token=9f037f9a-0f37-4c5b-9b30-6b55ffb11f5b" alt="The Replace image icon in GitBook"></picture>.

在下拉菜单中，选择 **为深色模式添加图片**。设置完成后，您可以通过同一菜单替换任一图片。

{% hint style="warning" %}
**注意：** GitBook 目前不支持某些情况下的浅色和深色模式图片，包括页面封面或以下位置的图片封面： [卡片](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/zh/creating-content/blocks/cards).
{% endhint %}

### 通过 GitHub/GitLab Sync 使用浅色和深色模式图片 <a href="#light-and-dark-mode-through-github-gitlab-sync" id="light-and-dark-mode-through-github-gitlab-sync"></a>

您也可以通过 Markdown 中的 HTML 语法（`<picture>` 并在 `<source>`).

对于块级图片，请使用 `<figure>` HTML 元素，并在其中包含一个 `<picture>` 并在 `<source>` ：

```html
文本前

<figure>
  <picture>
    <source
      srcset="
        https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png
      "
      media="(prefers-color-scheme: dark)"
    />
    <img
      src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png"
      alt="GitHub logo"
    />
  </picture>
  <figcaption>说明文字</figcaption>
</figure>

文本后
```

对于内联图片（与文本同一行显示的图片），请使用 `<picture>` HTML 元素，并在其中包含一个 `<source>` ：

```html
图片前的文本
<picture
  ><source
    srcset="
      https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png
    "
    media="(prefers-color-scheme: dark)" />
  <img
    src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png"
    alt="GitHub 标志"
/></picture>
以及图片后的文本
```

{% hint style="warning" %}
**注意：** 我们目前还不支持 [仅限 GitHub 的语法](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) 通过 `#gh-dark-mode-only` 或者 `#gh-light-mode-only`.
{% endhint %}

### 调整大小

要调整图片大小，请将鼠标悬停其上并打开 **编辑菜单** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FA3OfGjPkE5GnOQvN36jN%2Fedit.svg?alt=media&#x26;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></picture>。点击 **大小** 按钮，可从可用选项中更改图片大小。

<figure><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F1cWY3c3CgGXIK4Bgnhb6%2Fimage_resizing%402x.png?alt=media&#x26;token=112c7e1d-6a04-4a59-a69d-6292a74297ff" alt="A GitBook screenshot showing how to resize an image"><figcaption><p>调整图片大小</p></figcaption></figure>

* **小** – 图片大小的 25%
* **中等** – 图片大小的 50%
* **大型** – 图片大小的 75%
* **适合** – 移除所有尺寸设定，并以全尺寸显示，或者对于较大的图片，将最大宽度限制为 **735** **像素** 。

如果您的图片宽度大于编辑器，GitBook 会改为将图片宽度限制为编辑器的宽度，并且调整大小将基于此限制。

{% hint style="info" %}
**注意：** 在图片画廊中调整图片大小时，结果可能与调整单张图片不同。
{% endhint %}

{% hint style="info" %}
您可以让图片块 [占满窗口的整个宽度](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/zh/creating-content/blocks/..#full-width-blocks) ，方法是点击块旁边的 **选项菜单** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture> 并选择 **全宽**.
{% endhint %}

### 通过 Git Sync 调整图片大小

如果您希望更精确地控制图片大小，可以在 GitHub 或 GitLab 中使用 Markdown 指定确切尺寸。

当我们导出图片时，会使用 HTML 标签 `<img/>`。根据规范，我们可以使用 `width` 并在 `height` 属性来指定图片尺寸，这些属性只接受像素值，或者数字与一个 `%` 符号的组合。\
\
指定图片尺寸的有效变体有：\
\
`<img width="100" />` 将图片宽度设置为 100 像素\
`<img width="100%" />` 将图片设置为全尺寸（不过这会受到编辑器限制）

### 对齐图片

默认情况下，图片块会以全尺寸显示图片，并居中对齐。

要更改图片的对齐方式，请打开该块的 **选项菜单** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture> 并选择您想要的对齐方式。这只会影响比编辑器更窄的图片，或您已经 [调整过大小的图片](#resizing).

### 为图片添加边框

您可以为图片块添加边框，使图片看起来更统一，并在视觉上将其与周围内容区分开来。

<div data-with-frame="true"><figure><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FfL0VWcltHyuCKeqJsW0Q%2Fimage-frame-demo%402x.jpg?alt=media&#x26;token=6cac6c68-c288-4c42-abb2-e2bb7de23652" alt="A black and white photograph of a lone figure walking across a stark white landscape"><figcaption><p>带边框的图片可以包含说明文字，并在说明文字后方显示一个细微的网格背景。</p></figcaption></figure></div>

要为图片添加边框，请将鼠标悬停其上，打开该块的 **选项菜单** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt=""></picture> 并启用 **带边框** 切换开关。

{% hint style="info" %}
**提示：** 您只能为块中的单张图片添加边框。包含多张图片的图片块和内联图片都不能添加边框。
{% endhint %}

### 在 Markdown 中的表示

```markdown
//简单块
![](https://gitbook.com/images/gitbook.png)

//带说明文字的块
![GitBook 标志](https://gitbook.com/images/gitbook.png)

//带替代文本的块

<figure><img src="https://gitbook.com/images/gitbook.png" alt="GitBook 标志"></figure>

//带说明文字和替代文本的块

<figure><img src="https://gitbook.com/images/gitbook.png" alt="GitBook 标志"><figcaption><p>GitBook 标志</p></figcaption></figure>

//带边框图片的块

<div data-with-frame="true"><img src="https://gitbook.com/images/gitbook.png" alt="GitBook 标志"></div>

//带有深色和浅色模式不同图片并附带说明文字的块

<figure>
  <picture>
    <source srcset="https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png" media="(prefers-color-scheme: dark)">
    <img src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png" alt="GitHub logo">
  </picture>
  <figcaption>说明文字</figcaption>
</figure>
```