Как можно отображать изображения рядом в GitHub README.md?

Я пытаюсь показать сравнение между двумя фотографиями в моем README.md, поэтому я хочу отображать их рядом. Вот как два изображения размещены в настоящее время. Я хочу показать две цветовые схемы Solarized рядом, а не сверху и снизу. Помощь будет высоко ценится, спасибо!

Самый простой способ решить эту проблему - использовать таблицы, включенные в разметку GitHub.

Для вашего конкретного примера это будет выглядеть примерно так:

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

Пока изображения не слишком большие, они будут отображаться встроенными, как показано на следующем снимке экрана файла README из GitHub:

Это отобразит три изображения рядом, если они не слишком широкие.

<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 и некоторые разрывы для достижения желаемого эффекта, например:

# 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кнопку.

Вы получите такую ​​таблицу в своем хранилище --->

Врезаться в @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. Изображения с различной высотой могут не выравниваться по вертикали в верхней части ячейки. Это свойство обрабатывает это для вас.