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

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

Answer 1

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

对于你的具体例子，它看起来像这样：

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

这会创build一个Solarized Dark和Ocean作为标题的表格，然后在第一行包含图像。 显然你会取代...与真正的联系。 这些是可选的（它们只是将内容集中在单元格中，在这种情况下这是不必要的）。 此外，您可能需要缩小图像的尺寸，以便它们更好地并排显示。

Answer 2

您可以通过在同一行上为每个图像写入降价来放置每个图像。

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

只要图像不是太大，它们就会像GitHub的README文件的屏幕截图一样显示在内部：

Answer 3

类似于其他的例子，但使用html尺寸，我使用：

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

这是一个例子

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

我使用Remarkabletesting了这个。

Answer 4

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

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

Answer 5

如果像我一样，你发现@wiggin的答案不起作用，图像仍然没有在线显示，你可以使用HTML图像标签的'align'属性和一些rest，以达到预期的效果，例如：

 # Title <img align="left" src="./documentationhttp://img.dovov.comA.jpg" alt="Made with Angular" title="Angular" hspace="20"/> <img align="left" src="./documentationhttp://img.dovov.comB.png" alt="Made with Bootstrap" title="Bootstrap" hspace="20"/> <img align="left" src="./documentationhttp://img.dovov.comC.png" alt="Developed using Browsersync" title="Browsersync" hspace="20"/> <br/><br/><br/><br/><br/> ## Table of Contents... 

显然，根据图像的大小，你必须使用更多的rest时间：可怕的是，但它对我有用，所以我想我会分享。