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

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

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

以您的特定示例为例：

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

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

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

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

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

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

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

与其他示例类似，但是使用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进行了测试。

如果像我一样，您发现@wiggin答案无效，并且图像仍未在线显示，则可以使用html image标签的'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...

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

这是使应用程序添加图像/屏幕截图并保持存储库外观清洁的最佳方法。

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按钮。

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

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