第六篇 Asciidoc 图片按行排

关于排列

如果把要显示的内容看成一个集合，那么每一个内容都可以看成一个盒子，盒子与盒子的关系只可能有三种：

• 上下关系（按列排），也就是一个内容在上，一个内容在下

• 左右关系（按行排），也就是一个在左，一个在右，如果排满了一行，就接着排下一行

• 包含关系（一个是容器，另一个是容器里面的一个元素）：例如，相框套照片

上述逻辑，对于熟悉 HTML 的小伙伴，并不是什么新概念，就是 Block元素 和 inline元素，即块元素和行内元素。

图片为什么要按行排？

大多数情况下，我们使用图片，都是上下排，也就是将它看作是块元素（Block element），比如示意图或者插图。 但有的时候，当图片一句话的一部分时，将图片看作一句话中的一个字，效果更好。

比如，您在写用户使用手册，有这么一句话：

按退出按钮，可以退出系统。

上面的 退出 两字，如果直接显示为一个系统操作界面上的退出按钮图片，效果是最好的，此时，我们需要图片是按行排的。

图片案列或者按行排的语法

以下是插入图片的语法：

//一般插入图片，用两个冒号
//图片标题可为空
//图片的宽高可空
image::图片的路径[图片的标题,图片的宽,图片的高]

//插入行内图片，用一个冒号
//图片标题可为空
//图片的宽高可空
image:图片的路径[图片的标题,图片的宽,图片的高]

示例

下面输入asciidoc内容

按 image:2024-05-13T06-26-21-495Z.png[] 可退出系统。

NOTE	如果您和笔者一样，是在 vscode+asciidoc插件环境下撰写asciidoc文档的话，在输入上述内容到需要插入图片时，直接按 Ctrl + Alt + V 即可，因为恰好在一行文本的中部，插件会自动按行插入图片，非常方便。相应地，如果你在一个空行上，按 Ctrl + Alt + V 的话，插件会自动按列插入图片，非常方便。

得到的结果如下：

嗯，效果不错，就是图片太大了，我们通过调整宽高设置以下，代码修改如下：

按 image:2024-05-13T06-26-21-495Z.png[30,30] 可退出系统。

在上面代码的 [30,30] 部分，我们指定了图片的宽高，这样图片就和行文字匹配了。注意asciidoc会自动保持图片长宽比显示。

得到的结果如下：

这就是行内图文混排。

欢迎继续关注本系列。