Як можна відображати зображення поруч у GitHub README.md?

Я намагаюся показати порівняння між двома фотографіями в моєму README.md, тому я хочу їх відображати поруч. Ось як розміщені два зображення в даний час. Я хочу показати дві соляризовані кольорові схеми поруч, а не верх і низ. Допомога буде дуже вдячна, дякую!

Найпростіший спосіб, що я можу вирішити, це використовувати таблиці, включені в ароматну відмітку GitHub.

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

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

Це створює таблицю із заголовками Solarized Dark and 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"/>

Я перевірив це за допомогою чудового .

Якщо, як і я, ви виявили, що відповідь @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. Зображення з різною висотою можуть не розташовуватися вертикально біля верхньої частини комірки. Ця властивість обробляє її за вас.