图片与图表

图片与图表#

MyST Markdown 可用于在文档中包含图片和图表，并方便地在整个项目中引用这些图片。

1. 内联图片#

标准的 Markdown 图片语法是：

![fishy](img/fun-fish.png)

fishy

这将创建行内图片，显示在文本流中。

可以使用 attrs_inline 插件为行内图片添加属性：

![fishy](img/fun-fish.png){.bg-warning w=100px align=center}

还可以使用 html_image 扩展，允许 MyST 解析 HTML 图片标签：

<img src="img/fun-fish.png" alt="fishy" width="200px" class="bg-primary">

2. 块级图片#

要创建块级图片，请使用 image 指令：

```{image} img/fun-fish.png
:alt: fishy
:class: bg-primary
:width: 200px
:align: center
```

以下选项被识别：

图片选项

alt : text: 替代文本：图片的简短描述，由无法显示图片的应用程序显示，或由为视障用户设计的应用程序朗读。
height : length: 图片的期望高度。用于预留空间或垂直缩放图片。当同时指定“ scale ”选项时，它们会结合使用。例如，高度为 200px 且缩放比例为 50 相当于高度为 100px 且无缩放。
width ：当前行宽的长度或百分比: 图像的宽度。用于预留空间或水平缩放图像。与上面的“高度”一样，当同时指定了“缩放”选项时，它们会结合起来使用。
scale : 整数百分比（“%”符号可选）: 图像的均匀缩放比例因子。默认值为“100%”，即不进行缩放。
align : “top”, “middle”, “bottom”, “left”, “center”, or “right”: 值“top”（顶部）、“middle”（居中）和“bottom”（底部）用于控制图像的垂直对齐方式。; 值“left”（左对齐）、“center”（居中对齐）和“right”（右对齐）用于控制图像的水平对齐方式，使图像能够浮动并让文本环绕其周围。
target : text (URI or reference name): 将图像转换为超链接引用（“可点击”）。
class: 以空格分隔的CSS类列表，用于添加到图像上。
name: 用于 admonition 的引用目标（参见交叉引用）。

3. 图表（带标题的图像）#

要创建图表，请使用 figure 指令：

```{figure} img/fun-fish.png
:scale: 50 %
:alt: map to buried treasure

This is the caption of the figure (a simple paragraph).

The legend consists of all elements after the caption.  In this
case, the legend consists of this paragraph and the following
table:

| Symbol | Meaning |
| ------ | ------- |
| :fish: | fishy   |

```

藏宝图 — 这是图表的标题（简单的段落）。#

图例由标题之后的所有元素组成。在这种情况下，图例包括此段落及以下表格：

Symbol

Meaning

:fish:

fishy

“figure”指令支持“image”指令的所有选项，以及以下内容：

Figure 选项

figwidth : “image”，当前行宽的长度或百分比: 图表的宽度。如果值为“image”，则使用图像的宽度。否则，该值将被解释为当前行宽的长度或百分比。
figclass : text: 以空格分隔的CSS类列表，用于添加到图表上（class 会添加到图像中）。

参见

请参阅 Markdown 图表部分，了解如何创建使用原生 Markdown 图像的图表。

:::{figure-md}
![fishy](img/fun-fish.png){width=200px}

This is a caption in __*Markdown*__
:::

4. 包含多张图像的图表#

请参阅 sphinx-subfigure 插件，了解如何创建包含多张图像的图表。