图片

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

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

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

图片块示例

带说明文字的图片块示例

上传图片

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

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

2. 添加图片块 到您的页面中，并使用 选择图片 侧边栏，它会显示在窗口右侧。

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

GitBook 允许您上传单个文件大小不超过 100MB 的图片。

创建图片画廊

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

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

添加浅色和深色模式图片

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

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

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

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

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

您也可以通过 Markdown 中的 HTML 语法（<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 logo"
    />
  </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 logo">
  </picture>
  <figcaption>说明文字</figcaption>
</figure>