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

Question

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

Answer 1

我能想到的解决这个问题的最简单方法是使用 GitHub 风味标记中包含的tables。

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

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

这将创建一个以 Solarized Dark 和 Ocean 作为标题的表格，然后在第一行中包含图像。显然，您可以将

...

替换为真实链接。

:

是可选的（它们只是将内容集中在单元格中，在这种情况下这是不必要的）。此外，您可能想缩小图像的尺寸，以便它们并排显示得更好。

Answer 2

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

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

Answer 3

您可以通过将每个图像的标记写在同一行上来并排放置每个图像。

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

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

Answer 4

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

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

这是一个例子

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

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

Answer 5

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

<p align="center">
  <img alt="Light" src="./light.png" width="45%">
&nbsp; &nbsp; &nbsp; &nbsp;
  <img alt="Dark" src="./dark.png" width="45%">
</p>

关键是添加

 

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

您可以在 GitHub 上查看此示例：transitive-bullshit/nextjs-notion-starter-kit。

Answer 6

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

在存储库中创建一个

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

按钮。

您将在存储库中得到一个这样的表--->

Answer 7

有关 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)

（使用

:---

、

---:

和

:---:

分别用于列中的（文本）对齐：左、右、中）

Answer 8

如果像我一样，您发现@wiggin答案不起作用并且图像仍然没有内嵌显示，您可以使用html图像标签的“align”属性和一些中断来达到所需的效果，例如:

# Title

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

## Table of Contents...

显然，你必须根据图像的大小使用更多的中断：是的，很糟糕，但它对我有用，所以我想我会分享。

Answer 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 支持。具有不同高度的图像可能不会在单元格顶部附近垂直对齐。此属性为您处理。

Answer 10

我找到了一种方法，可以将 3 个图像左/中/右对齐在同一行，因此它会自动在它们之间添加合适的空间：

<p align="center">
      <img src="..." align="left">
      <img src="...">
      <img src="..." align="right">
</p>

这就是我的真实用例这里：

Answer 11

我使用了这里的解决方案：https://github.com/iced-rs/iced/blob/master/README.md?plain=1

<div align="center">

<a href="https://github.com/squidowl/halloy">
  <img src="https://iced.rs/showcase/halloy.gif" width="460px">
</a>
<a href="https://github.com/hecrj/icebreaker">
  <img src="https://iced.rs/showcase/icebreaker.gif" width="360px">
</a>

</div>