如何在 GitHub README.md 中并排显示图像？

Posted 2023-03-28

【中文标题】如何在 GitHub README.md 中并排显示图像？

【英文标题】：How can one display images side by side in a GitHub README.md?

【发布时间】：2014-08-10 18:04:43

【问题描述】：

我试图在我的 README.md 中显示两张照片之间的比较，这就是我想并排显示它们的原因。 Here 是这两个图像当前的放置方式。我想并排显示两种 Solarized 配色方案，而不是顶部和底部。非常感谢您的帮助，谢谢！

【问题讨论】：

我创建了一个小网络工具，让您无需自己编写标记即可添加和对齐图像：***.com/a/32790440/2477619

问题链接无效

【参考方案1】：

我能想到的最简单的解决方法是使用 GitHub 的风味降价中包含的 tables。

对于您的具体示例，它看起来像这样：

Solarized dark             |  Solarized Ocean
:-------------------------:|:-------------------------:
![](https://...Dark.png)  |  ![](https://...Ocean.png)

这会创建一个以 Solarized Dark 和 Ocean 作为标题的表格，然后在第一行包含图像。显然你会用真实链接替换...。 :s 是可选的（它们只是将单元格中的内容居中，在这种情况下有点不必要）。此外，您可能希望缩小图像尺寸，以便它们能够更好地并排显示。

【讨论】：

![](https://...Ocean.png) 在这些方括号之间，您可以添加当您将鼠标悬停在图像上时显示的 Alt-Text。

如果你想在 github 上的同一行上放更多的图像，这个解决方案会更好。我设法将 4 与此解决方案放在同一条线上，但只有 3 与 wigging 的解决方案放在一起。

太棒了！也适用于 Bitbucket。 （好吧，我至少可以保证它在他们的拉取请求屏幕上有效。）

太糟糕了，这会在您的图像周围设置边框。

@EpicDavi ：在您的代码上下文中，您如何缩小表格中的图像？

【参考方案2】：

如果图像不太宽，这将并排显示三个图像。

<p float="left">
  <img src="/img1.png"  />
  <img src="/img2.png"  /> 
  <img src="/img3.png"  />
</p>

【讨论】：

伟大而直接的解决方案，应该有更多的支持。

是的，确实，它应该有更多的赞成票！我使用<p align="middle"> 将图像对齐在中心。

是否可以为每张图片添加标题？

我更喜欢将图像指定为总宽度的百分比，例如width="32%" 对齐 3 张图片时

如何使用此方法添加图片说明/标题？

【参考方案3】：

您可以将每张图片并排放置，方法是将每张图片的降价写在同一行。

![alt-text-1](image1.png "title-1") ![alt-text-2](image2.png "title-2")

只要图像不太大，它们就会内联显示，如来自 GitHub 的 README 文件的屏幕截图所示：

【讨论】：

不太适合我。 （相对）图像之一是 gif

@RidhwaanShakeel 您的图像是否为 GIF 并不重要。我用这个方法成功地并排放置了两个gif。

不适用于大（太宽）图像

【参考方案4】：

与其他示例类似，但我使用的是 html 大小调整：

<img src="image1.png" /> <img src="image2.png" /> 

这是一个例子

<img src="https://openclipart.org/image/2400px/svg_to_png/28580/kablam-Number-Animals-1.png" /> <img src="https://openclipart.org/download/71101/two.svg" />

我使用Remarkable对此进行了测试。

【讨论】：

我在问题中使用<img height="350" hspace="20"/> 作为图像之间的分隔符（wigging's answer 不起作用）。

哇，多么了不起的卓越 md 编辑器。谢谢。

终于！谢谢:-)

伟大而直接的解决方案，应该有更多的支持。

这也适用于需要调整大小以适应一行的较大图像。

【参考方案5】：

这是为您的应用添加图像/屏幕截图并保持您的存储库看起来干净的最佳方式。

在您的存储库中创建一个screenshot 文件夹并添加您要显示的图像。

现在转到README.md 并添加此 HTML 代码以形成一个表格。

#### Flutter App Screenshots

<table>
  <tr>
    <td>First Screen Page</td>
     <td>Holiday Mention</td>
     <td>Present day in purple and selected day in pink</td>
  </tr>
  <tr>
    <td><img src="screenshots/Screenshot_1582745092.png" width=270 height=480></td>
    <td><img src="screenshots/Screenshot_1582745125.png" width=270 height=480></td>
    <td><img src="screenshots/Screenshot_1582745139.png" width=270 height=480></td>
  </tr>
 </table>

在<td><img src="(COPY IMAGE PATH HERE)" width=270 height=480></td>

** 获取图片路径 --> 进入screenshot文件夹，打开image，在最右边，你会找到Copy path按钮。

你会在你的存储库中得到一个这样的表--->

【讨论】：

Shukran Maruf :) 你成就了我的一天！

【参考方案6】：

此解决方案还允许您在图像之间添加空间。它结合了所有现有解决方案中最好的部分，并且没有添加任何难看的表格边框。

<p align="center">
  <img  src="https://...light.png" >
&nbsp; &nbsp; &nbsp; &nbsp;
  <img  src="https://...dark.png" >
</p>

关键是添加 不间断空格HTML实体，您可以添加和删除这些实体以自定义间距。

您可以在 GitHub here 上实时查看此示例。

【参考方案7】：

如果像我一样，你发现@wiggin 的回答不起作用并且图像仍然没有出现在行内，你可以使用 html 图像标签的 'align' 属性和一些中断来达到预期的效果，例如：

# Title

<img align="left" src="./documentation/images/A.jpg"  title="Angular" hspace="20"/>
<img align="left" src="./documentation/images/B.png"  title="Bootstrap" hspace="20"/>
<img align="left" src="./documentation/images/C.png"  title="Browsersync" hspace="20"/>
<br/><br/><br/><br/><br/>

## Table of Contents...

显然，您必须根据图像的大小使用更多的休息时间：糟糕，是的，但它对我有用，所以我想我会分享。

【讨论】：

谢谢！如果图片之间没有足够的空间，hspace 也是一个巧妙的小技巧。不知道github实际上会解析它。

【参考方案8】：

markdown 表语法见：

https://www.markdownguide.org/extended-syntax/#tables

---

快速总结：

要快速理解其他答案中使用的语法，最好从更完整直观且更容易记住的语法开始，然后是具有相同结果的最小化版本。

基本示例：

| Header A       | Header B       |
| -------------- | -------------- |
| row 1 col 1    | row 1 col 2    |
| row 2 column 1 | row 2 column 2 |

相同的结果是更简约的形式（单元格宽度可以变化）：

Header A | Header B
--- | ---
row 1 col 1 | row 1 col 2
row 2 column 1 | row 2 column 2

还有更多与问题相关的内容：顶部带有标签的并排图像：

label 1 | label 2
--- | ---
![](https://...image1.png) | ![](https://...image2.png)

（使用:---、---:和:---:分别用于列中的（文本）对齐：左、右、居中）

【参考方案9】：

捎带@Maruf Hassan

# Title

<table>
  <tr>
    <td>First Screen Page</td>
     <td>Holiday Mention</td>
     <td>Present day in purple and selected day in pink</td>
  </tr>
  <tr>
    <td valign="top"><img src="screenshots/Screenshot_1582745092.png"></td>
    <td valign="top"><img src="screenshots/Screenshot_1582745125.png"></td>
    <td valign="top"><img src="screenshots/Screenshot_1582745139.png"></td>
  </tr>
 </table>

<td valign="top">...</td> 受 GitHub Markdown 支持。具有不同高度的图像可能不会在单元格顶部附近垂直对齐。此属性会为您处理。

【讨论】：

我不知道这件事。我一直在寻找将屏幕自动对齐到其自然尺寸的方法。谢谢！