图片

向页面添加图片或图片库，为深色模式添加图片变体，并按需调整图片大小和对齐方式

您可以在页面中插入图片，然后选择其大小以及左对齐、居中或右对齐。您还可以选择性地为图片块添加替代文本和/或标题。

提示： 出于无障碍考虑，我们建议为图片设置替代文本。

图片块示例

带标题的图片块示例

上传图片

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

1. 将图片从文件管理系统直接拖放到页面中的空白块里。

2. 添加图片块 到您的页面，并使用 选择图片 右侧出现的侧边栏。

如果您采用第二种方式，可以选择上传文件、选择先前上传的文件、粘贴图片 URL，或通过 Unsplash 使用内置搜索添加图片。

GitBook 允许您每个文件上传最大 100MB 的图片。

创建图片画廊

在图片块中添加多于一张图片会创建画廊。为此，请打开该块的 选项菜单 并选择 添加图片… 以再次打开 选择图片 侧边栏。

要从画廊中删除图片，请打开要删除图片上的 编辑菜单 ，然后按 删除 ⌫ 键。

为浅色和深色模式添加图片

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

要为深色模式添加图片，请将鼠标悬停在图片上，打开 编辑菜单 并点击 替换图片 .

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

注意： GitBook 目前不支持某些情况下的浅色和深色模式图片，包括页面封面或 卡片.

通过 GitHub/GitLab Sync 使用浅色和深色模式图片

您还可以通过 HTML 语法（在 Markdown 中添加浅色和深色模式图片（<picture> 并 <source>).

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

文本前

<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 标志"
    />
  </picture>
  <figcaption>标题文本</figcaption>
</figure>

文本后

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

图片前的文本
<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>
以及图片后的文本

注意： 我们目前尚不支持 仅 GitHub 语法 通过 #gh-dark-mode-only 或 #gh-light-mode-only.

调整大小

要调整图片大小，请将鼠标悬停其上并打开 编辑菜单 。点击 大小 按钮，从可用选项中更改图片大小。

调整图片大小

• 小 – 图片大小的 25%

• 中号 – 图片大小的 50%

• 大号 – 图片大小的 75%

• 适应 – 移除所有大小设置，并以全尺寸显示，或将较大图片的最大宽度限制为 735 像素 。

如果图片宽度大于编辑器，GitBook 会将图片宽度限制为编辑器宽度，并根据此限制进行缩放。

注意： 在图片画廊中调整图片大小时，结果可能与调整单张图片不同。

通过 Git Sync 调整图片大小

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

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

对齐图片

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

要更改图片的对齐方式，请打开该块的 选项菜单 并选择您想要的对齐方式。这只会影响窄于编辑器的图片，或您已 调整大小.

为图片添加边框

您可以为图片块添加边框，让图片外观更统一，并在视觉上将其与周围内容分隔开。

带边框的图片可以有标题，并会在标题后方显示细微的网格背景。

要为图片添加边框，请将鼠标悬停其上，打开该块的 选项菜单 并启用 带边框 切换开关。

提示： 您只能为块中的单张图片添加边框。包含多张图片的图片块和内联图片都不能加边框。

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 标志">
  </picture>
  <figcaption>标题文本</figcaption>
</figure>