Jak można wyświetlać obrazy obok siebie w GitHub README.md?

Próbuję pokazać porównanie dwóch zdjęć w moim pliku README.md, dlatego chcę je wyświetlić obok siebie. Oto, jak obecnie rozmieszczone są dwa obrazy. Chcę pokazać obok siebie dwa schematy kolorów Solarized zamiast góry i dołu. Pomoc byłaby bardzo mile widziana, dzięki!

Najłatwiejszym sposobem rozwiązania tego problemu jest użycie tabel zawartych w aromatyzowanych przecenach GitHub.

W twoim konkretnym przykładzie wyglądałoby to mniej więcej tak:

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

Spowoduje to utworzenie tabeli z nagłówkami Solarized Dark i Ocean, a następnie zawiera obrazy z pierwszego wiersza. Oczywiście zastąpiłbyś ...prawdziwy link. Te :są opcjonalne (po prostu wyśrodkowują zawartość w komórkach, co w tym przypadku jest trochę niepotrzebne). Możesz także zmniejszyć rozmiar obrazów, aby były lepiej wyświetlane obok siebie.

Możesz umieścić każdy obraz obok siebie, wpisując znacznik dla każdego obrazu w tej samej linii.

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

Dopóki obrazy nie są zbyt duże, będą wyświetlane w tekście, jak pokazano na poniższym zrzucie ekranu pliku README z GitHub:

Spowoduje to wyświetlenie trzech obrazów obok siebie, jeśli obrazy nie są zbyt szerokie.

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

Podobnie jak w innych przykładach, ale używając rozmiaru html, używam:

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

Oto przykład

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

Przetestowałem to używając Remarkable .

Jeśli, tak jak ja, okazało się, że odpowiedź @wiggin nie działa, a obrazy nadal nie pojawiają się w linii, możesz użyć właściwości `` align '' tagu obrazu html i kilku przerw, aby osiągnąć pożądany efekt, na przykład:

# 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...

Oczywiście musisz użyć więcej przerw w zależności od tego, jak duże są obrazy: okropne tak, ale zadziałało dla mnie, więc pomyślałem, że się podzielę.

Jest to najlepszy sposób na dodawanie obrazów / zrzutów ekranu aplikacji i utrzymanie porządku w repozytorium.

Utwórz screenshotfolder w swoim repozytorium i dodaj obrazy, które chcesz wyświetlić.

Teraz przejdź do README.mdi dodaj ten kod HTML, aby utworzyć tabelę.

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

w <td><img src="(COPY IMAGE PATH HERE)" width=270 height=480></td>

** Aby uzyskać ścieżkę obrazu -> Przejdź do screenshotfolderu i otwórz, imagea po prawej stronie znajduje się Copy pathprzycisk.

Otrzymasz taką tabelę w swoim repozytorium --->

Na barku z @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>jest obsługiwany przez GitHub Markdown. Obrazy o różnych wysokościach mogą nie być wyrównane w pionie w pobliżu górnej części komórki. Ta właściwość obsługuje to za Ciebie.