图片

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

您可以将图像插入页面，然后选择它们的大小以及是否左对齐、居中或右对齐。您也可以选择在图像块上包含替代文本和/或说明文字。

提示： 出于无障碍访问的目的，我们建议为图像设置替代文本（alt 文本）。

图像块示例

一张从太空向地球拍摄的照片。前景有一颗卫星，背景是被海洋覆盖的地球部分，零星有云。

上传图像

将图像添加到内容有两种方法：

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

2. 向页面添加图像块 并使用 选择图像 出现在窗口右侧的侧边面板。

如果您遵循第二种流程，您可以选择上传文件、选择先前上传的文件、粘贴图像 URL 或从 Unsplash 使用内置搜索添加图像。

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

创建图像画廊

向图像块添加多个图像会创建画廊。为此，请打开该块的 选项菜单 并选择 添加图像… 以再次打开 选择图像 侧边面板。

要从画廊中删除图像，请打开 操作菜单 在您想删除的图像上并按下 删除 ⌫ 键。

为浅色与深色模式添加图像

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

要为深色模式添加图像，请将鼠标悬停在图像上，打开 操作菜单 然后点击 替换图像 .

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

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

通过 GitHub/GitLab 同步的浅色和深色模式图像

您也可以通过 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 同步调整图像大小

如果您想更精确地控制图像大小，可以在 GitHub 或 GitLab 中通过 Markdown 指定确切大小。

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

对齐图像

默认情况下，图像块会以原始大小居中显示图像。

要更改图像的对齐方式，请打开该块的 选项菜单 并选择您想要的对齐方式。此操作仅会影响比编辑器窄的图像，或您已 调整过大小的.

在 Markdown 中的表示

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

//带说明的块
![The GitBook Logo](https://gitbook.com/images/gitbook.png)

//带替代文本的块

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

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

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

//在浅色和深色模式下使用不同图像并带说明的块

<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>