图片

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

你可以在页面中插入图像，然后选择它们的大小以及向左、居中或向右对齐。你也可以选择在图像块上包含替代文本和/或标题。

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

图像块示例

带标题的图像块示例

上传图像

有两种方法可以将图像添加到你的内容：

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/>。按照规范，我们可以使用 宽度 并且 高度 属性来指定图像的尺寸，这些属性只接受以像素为单位的值或数字与 % 符号的组合。 指定图像尺寸的有效变体有： <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 Logo</p></figcaption></figure>

// 带有边框图像的块

<div data-with-frame="true"><img src="https://gitbook.com/images/gitbook.png" alt="The GitBook Logo"></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>