Question

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

Answer 1

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

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

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

这将创建一个以Solarized Dark和Ocean为标题的表格，然后在第一行中包含图像。显然你会用真实的链接替换...。 :是可选的（它们只是将内容置于单元格的中心，在这种情况下这是不必要的）。此外，您可能希望缩小图像尺寸，以便它们能够更好地并排显示。

Answer 2

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

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

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

Answer 3

如果图像不宽，则会并排显示三个图像。

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

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

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

在存储库中创建一个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 6

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

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

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

您可以在 GitHub here 上实时查看此示例。

Answer 7

如果像我一样，你发现@wiggin的答案没有工作，而且图片仍然没有显示在线，你可以使用＆＃39; align＆＃39; html图像标记的属性和一些中断以实现所需的效果，例如：

body {
 margin: 0;
 padding: 0;
 font-family: 'Josefin Sans', sans-serif;
 background-color: #EFEFEF;
 text-align: center;
 overflow: hidden;
 height: 100%;
 width: 100%;
}
.mySec { 
  position: relative;
  height: 100%;
  margin-right: 4%;
  margin-left: 4%;
  margin-top: 4%;
  padding-bottom: 4%;
  overflow: hidden;
}
.header {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#FFC0CB, #9370DB); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#FFC0CB, #9370DB ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FFC0CB, #9370DB); /* For Firefox 3.6 to 15 */
}
#headList {
  list-style: none;
  font-family: 'Josefin Sans', sans-serif;
  position: relative;
  left: -1vw;
}
#headList li {
    display: inline;
}
#headList li a {
    color: #000;
    font-size: 1.4vw;
    padding: 2vw;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 200;
}
.title {
  font-family: 'Amatic SC', cursive;
  font-size:8vw;
  position: relative;
  bottom: 8.3vh;
  color: #000;
}

.title2 {
  color: #000;
  position: relative;
  font-size: 2vw;
  bottom: 14vh;
}
#pilLogo {
    position: relative;
    left: 25vw;
    bottom: 41vh;
}
.info {
    position: relative;
    top: 25vh;
}

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

Answer 8

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

GitHub Markdown支持

<td valign="top">...</td>。高度不同的图像可能无法在单元格顶部附近垂直对齐。此属性为您处理。

Answer 9

有关降价表语法，请参见：

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)

（将:---，---:和:---:用于该列中的（文本）对齐方式：左，右，居中）

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

9 个答案: