Image grid in reStructuredText / Sphinx

问题:

I'm using Sphinx to create documentation for a Python project I'm working on. I have three images I would like to display in a 1x3 grid (i.e. all on the same line), and I'm trying to figure out how to do this in reStructuredText. Right now I have

.. image:: _images/report_title.png

.. image:: _images/report_slide1.png

.. image:: _images/report_slide2.png

I thought about trying to build one of the reST tables around them on a single line, but that seemed a little ridiculous. How can I grid these images?

回答1:

You can specify the width option for each of your images (see the reStructuredText image directive documentation) to be approximately one third or less of the width of the page.

Try, for example

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

The lengths allowed in the width (and height) options are discussed here (they essentially correspond to the length units in CSS documents).

回答2:

The alternate answer is to use directives as aliases to the image.

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

Then use the alias inside a table:

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

回答3:

For the aliasing, I had better luck with:

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

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

回答4:

I provide another reference. If you want to place puml you can try

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