# 图片 您可以在页面中插入图片，然后选择其大小以及左对齐、居中或右对齐。您还可以选择性地为图片块添加替代文本和/或标题。 {% hint style="info" %} **提示：** 出于无障碍考虑，我们建议为图片设置替代文本。 {% endhint %} ### 图片块示例
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.

带标题的图片块示例

### 上传图片 向内容中添加图片有两种方式： 1. 将图片从文件管理系统直接拖放到页面中的空白块里。 2. [添加图片块](/docs/documentation/zh/creating-content/blocks.md#inserting-a-new-content-block) 到您的页面，并使用 **选择图片** 右侧出现的侧边栏。 如果您采用第二种方式，可以选择上传文件、选择先前上传的文件、粘贴图片 URL，或通过 [Unsplash](https://unsplash.com/) 使用内置搜索添加图片。 {% hint style="warning" %} GitBook 允许您每个文件上传最大 100MB 的图片。 {% endhint %} #### 创建图片画廊 在图片块中添加多于一张图片会创建画廊。为此，请打开该块的 **选项菜单** The Options menu icon in GitBook 并选择 **添加图片…** 以再次打开 **选择图片** 侧边栏。 要从画廊中删除图片，请打开要删除图片上的 **编辑菜单** ，然后按 **删除 ⌫** 键。 ### 为浅色和深色模式添加图片 您可以为已发布网站的浅色和深色模式版本设置不同的图片。GitBook 会根据访问者所处的模式自动显示正确的图片。 要为深色模式添加图片，请将鼠标悬停在图片上，打开 **编辑菜单** 并点击 **替换图片** The Replace image icon in GitBook. 在下拉菜单中，选择 **为深色模式添加图片**。设置完成后，您可以从同一个菜单替换任一图片。 {% hint style="warning" %} **注意：** GitBook 目前不支持某些情况下的浅色和深色模式图片，包括页面封面或 [卡片](/docs/documentation/zh/creating-content/blocks/cards.md). {% endhint %} ### 通过 GitHub/GitLab Sync 使用浅色和深色模式图片 您还可以通过 HTML 语法（在 Markdown 中添加浅色和深色模式图片（`` 并 ``). 对于块级图片，请使用 `
` HTML 元素，并在其中包含 `` 并 `` ： ```html 文本前
GitHub 标志
标题文本
文本后 ``` 对于内联图片（与文本并排显示的图片），请使用 `` HTML 元素，并在其中包含 `` ： ```html 图片前的文本 GitHub 标志 以及图片后的文本 ``` {% hint style="warning" %} **注意：** 我们目前尚不支持 [仅 GitHub 语法](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) 通过 `#gh-dark-mode-only` 或 `#gh-light-mode-only`. {% endhint %} ### 调整大小 要调整图片大小，请将鼠标悬停其上并打开 **编辑菜单** 。点击 **大小** 按钮，从可用选项中更改图片大小。
A GitBook screenshot showing how to resize an image

调整图片大小

* **小** – 图片大小的 25% * **中号** – 图片大小的 50% * **大号** – 图片大小的 75% * **适应** – 移除所有大小设置，并以全尺寸显示，或将较大图片的最大宽度限制为 **735** **像素** 。 如果图片宽度大于编辑器，GitBook 会将图片宽度限制为编辑器宽度，并根据此限制进行缩放。 {% hint style="info" %} **注意：** 在图片画廊中调整图片大小时，结果可能与调整单张图片不同。 {% endhint %} ### 通过 Git Sync 调整图片大小 如果您希望对图片尺寸有更精细的控制，可以在 GitHub 或 GitLab 中使用 Markdown 指定确切大小。 当我们导出图片时，会使用 HTML 标签 ``。根据规范，我们可以使用 `width` 并 `height` 属性来指定图片尺寸，这些属性只接受像素值，或数字与一个 `%` 符号的组合。\ \ 指定图片尺寸的有效变体有：\ \ `` 将图片宽度设为 100 像素\ `` 将图片设为全尺寸（不过这会受编辑器限制） ### 对齐图片 默认情况下，图片块会以全尺寸显示图片，并居中对齐。 要更改图片的对齐方式，请打开该块的 **选项菜单** The Options menu icon in GitBook 并选择您想要的对齐方式。这只会影响窄于编辑器的图片，或您已 [调整大小](#resizing). ### 为图片添加边框 您可以为图片块添加边框，让图片外观更统一，并在视觉上将其与周围内容分隔开。
A black and white photograph of a lone figure walking across a stark white landscape

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

要为图片添加边框，请将鼠标悬停其上，打开该块的 **选项菜单** 并启用 **带边框** 切换开关。 {% hint style="info" %} **提示：** 您只能为块中的单张图片添加边框。包含多张图片的图片块和内联图片都不能加边框。 {% endhint %} ### Markdown 中的表示 ```markdown //简单块 ![](https://gitbook.com/images/gitbook.png) //带标题的块 ![GitBook 标志](https://gitbook.com/images/gitbook.png) //带替代文本的块
GitBook 标志
//带标题和替代文本的块
GitBook 标志

GitBook 标志

//带边框图片的块
GitBook 标志
//带有深色和浅色模式不同图片的块，含标题
GitHub 标志
标题文本
``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://gitbook.com/docs/documentation/zh/creating-content/blocks/insert-images.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.