图片

向页面添加图像或图像库，为暗黑模式添加图像变体，并根据需要调整图像大小和对齐

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

提示： 出于可访问性考虑，我们建议为图像设置替代文本（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.

上传图像

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

将图像从您的文件管理系统拖放到页面上的空白块中。
向您的页面添加图像块并使用 选择图像 出现在窗口右侧的侧边面板。

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

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

创建图像库

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

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

为亮/暗模式添加图像

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

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

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

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

通过 GitHub/GitLab 同步的亮/暗模式图像

您也可以通过 HTML 语法（<picture> 和 <source>).

在 Markdown 中添加亮/暗模式图像。 对于块级图像，使用 <figure> <picture> 和 <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 logo"
  </picture>
<figcaption>说明文本</figcaption>

</figure>

图像之后的文本 <picture> <figure> <source> HTML 元素并在其中包含一个

对于内联图像（与文本在同一行的图像），使用
图像之前的文本
  <picture
    <source
      srcset="
    "
    ><source
  media="(prefers-color-scheme: dark)"
    <img
    media="(prefers-color-scheme: dark)" />
alt="The GitHub Logo"
/></picture>

注意： 以及图像之后的文本我们尚不支持仅限 GitHub 的语法 通过 #gh-dark-mode-only 或.

#gh-light-mode-only

调整大小 编辑菜单 要调整图像大小，请将鼠标悬停在图像上并打开 。点击 大小

A GitBook screenshot showing how to resize an image

调整图像大小 小
– 图像大小的 25% 中等
– 图像大小的 50% 大
– 图像大小的 75% 适应 735 – 删除所有大小规格并以原始大小显示，或对于较大图像限制为最大宽度 像素

如果您的图像比编辑器更宽，GitBook 会将图像的宽度限制为编辑器的宽度，并且调整大小将基于该限制。

注意： 在图像库中调整图像大小时，结果可能与调整单个图像的大小不同。

您可以将图像块使其跨越窗口的全宽通过点击位于块旁的 选项菜单 并选择全宽.

通过 Git 同步调整图像大小

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

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

对齐图像

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

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

为图像加边框

您可以为图像块添加边框，使图像具有一致的外观，并在视觉上将其与周围内容分隔开。

A black and white photograph of a lone figure walking across a stark white landscape

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

注意事项： 您只能为块中的单张图像添加边框。包含多张图像的图像块和内联图像无法添加边框。

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

//在亮暗模式下使用不同图像并带说明的块

对于块级图像，使用
  <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">
  alt="GitHub logo"
  </picture>
<figcaption>说明文本</figcaption>

最后更新于10天前

这有帮助吗？