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

小开

最佳答案

我能想到的解决这个问题的最简单的方法是使用GitHub的调味markdown中包含的表。

在你的具体例子中，它看起来是这样的:

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

这将创建一个以Solarized Dark和Ocean为标题的表，然后在第一行中包含图像。显然，你会用真正的链接替换...。__abc1是可选的(它们只是将单元格中的内容居中，在本例中这有点不必要)。此外，您可能想缩小图像，以便它们更好地并排显示。

小开

您可以将每个图像并排放置，方法是将每个图像的标记写在同一行上。

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

只要图像不是太大，它们将内联显示，如下图所示，这是一个来自GitHub的README文件截图:

小开

类似于其他例子，但使用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"/>

我使用非凡的测试了这个。

小开

如果，像我一样，你发现@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...

显然，你必须根据图像的大小使用更多的休息时间:是的，这很糟糕，但对我来说很管用，所以我想我应该分享一下。

小开

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

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

小开

这是添加应用图像/截图的最佳方法，可以保持存储库的整洁。

在你的存储库中创建一个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按钮。

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

小开

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

小开

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

(分别使用:---、---:和:---:对列中的(文本)进行对齐:左、右、中)

小开

这个解决方案还允许您在图像之间添加空间。它结合了所有现有解决方案的最佳部分，并且没有添加任何丑陋的表边框。

<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上看到这个例子。

小开

我找到了一种方法，让3张图片在同一条线上左/中/右对齐，所以它会自动在它们之间添加合适的空间:

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

这是我的真实用例在这里的样子: