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

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

我能想到的解决这一问题的最简单方法是使用GitHub的特色降价中包含的

在您的具体示例中，它看起来像这样：

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

---

这将创建一个以Solarized Dark和Ocean作为标题的表，然后在第一行中包含图像。显然，您将用实际链接替换

…

。

：

是可选的（它们只是将内容放在单元格的中心，在本例中这是不必要的）。此外，您可能希望缩小图像的大小，以便它们能够更好地并排显示。

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

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

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

---

与其他示例类似，但使用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 answer不起作用，并且图像仍然没有在线显示，您可以使用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...

#标题








##目录。。。

---

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

如果图像不太宽，这将同时显示三幅图像

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

在存储库中创建一个

屏幕截图

文件夹，并添加要显示的图像

现在转到

README.md

并添加此HTML代码以形成一个表

#####颤振应用程序屏幕截图
第一屏幕页
假日提及
紫色的当前日期和粉色的选定日期

在

**要获取图像路径-->请转到

屏幕截图

文件夹并打开

图像

，在最右侧，您将找到

复制路径

按钮

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

---

背驮@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>

#标题
第一屏幕页
假日提及
紫色的当前日期和粉色的选定日期

---

GitHub Markdown支持

…

。具有不同高度的图像可能无法在单元格顶部附近垂直对齐。此属性可为您处理此属性。

有关标记表语法，请参阅：

---

快速总结：

为了快速理解其他答案中使用的语法，可以从更完整、更直观、更容易记忆的语法开始，然后是一个具有相同结果的简化版本

基本示例：

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

---

（分别使用

：--

、

：

和

：--:

对齐列中的（文本）：左、右、中）

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

关键是添加

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

---

---

您可以在GitHub上实时看到这个示例。

！[](https://...Ocean.png)

在这些方括号之间，您可以添加鼠标悬停在图像上时显示的Alt文本。如果您希望在github的同一行上放置更多图像，此解决方案会更好。我设法用这个解决方案把4个放在同一条线上，但用wigging的解决方案只放了3个。太好了！也适用于Bitbucket。（好吧，我至少可以保证它在他们的请求屏幕上起作用。）太糟糕了，这会在你的图像周围加上一个边框。@EpicDavi:在你的代码中，你如何缩小表中的图像？我在一期文章中使用了

作为图像之间的分隔符（不起作用）。哇，这是一个多么了不起的md编辑器啊。谢谢，最后！谢谢：-）伟大而直接的解决方案，应该有更多的向上投票。这也适用于需要调整大小以适应一行的较大图像。伟大而直接的解决方案，应该有更多的向上投票。是的，确实，它应该有更多的向上投票！我使用了

来对齐中间的图像。是否可以为每个图像添加标题？我更喜欢将图像指定为总宽度的百分比，例如，

width=“32%”

在对齐3个图像时显示我可以使用此方法添加图像标题/标题吗？谢谢！另外，如果图片之间没有足够的空间，hspace是一个巧妙的小技巧。我创建了一个小小的网络工具，允许你添加和对齐图像，而无需自己编写标记：来自问题的链接对我来说不太管用。其中一个（相对）图像是gif@RidhwaanShakeel你的图片是否是GIF并不重要。我用这种方法成功地将两个GIF并排放置。这对大图像不起作用。舒克兰·马鲁夫：）你让我高兴极了！我不知道这件事。这正是我想要的，使屏幕自动与自然大小对齐。谢谢

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