reStructuredText / Sphinx 中的图像网格

Question

我正在使用 Sphinx 为我正在处理的 Python 项目创建文档。 我想在 1x3 网格中显示三张图像（即全部在同一行），我试图弄清楚如何在 reStructuredText 中执行此操作。 现在我有

.. image:: _images/report_title.png

.. image:: _images/report_slide1.png

.. image:: _images/report_slide2.png

我曾想过尝试在一行中围绕它们构建一个 reST 表，但这似乎有点荒谬。 如何网格化这些图像？

Answer 1

您可以将每个图像的width选项（请参阅reStructuredText 图像指令文档）指定为页面宽度的大约三分之一或更小。

试试，例如

.. image:: _images/report_title.png
   :width: 30%
.. image:: _images/report_slide1.png
   :width: 30%
.. image:: _images/report_slide2.png
   :width: 30%

这里讨论了宽度（和高度）选项中允许的长度（它们基本上对应于CSS文档中的长度单位）。

Answer 2

另一个答案是使用指令作为图像的别名。

.. |logo| image:: ../iamges/wiki_logo_openalea.png
   :width: 20pt
   :height: 20pt

然后在表中使用别名：

 +---------+-----------+
 | |logo|  +  |logo2|  +
 +---------+-----------+

Answer 3

对于混叠，我有更好的运气：

.. |logo1| image:: logo1.png    
   :scale: 100%
   :align: middle
.. |logo2| image:: logo2.png
   :scale: 50%
   :align: top

+---------+---------+
| |logo1| | |logo2| |
+---------+---------+

Answer 4

我提供另一个参考。 如果你想放置puml你可以试试

    +---------------------+----------------------+
    | .. uml:: class.puml | .. uml:: class.puml  +
    |    :scale: 100%     |     :scale: 100%     +
    +---------------------+----------------------+

Answer 5

使用无边框列表::

.. list-table:: simple image grid
   :class: borderless

   * - .. image:: _images/report_title.png
     - .. image:: _images/report_slide1.png
     - .. image:: _images/report_slide2.png

如果您想要标题，也可以与“figure”指令一起使用。