Come si possono visualizzare le immagini fianco a fianco in un GitHub README.md?

Sto cercando di mostrare un confronto tra due foto nel mio README.md ed è per questo che voglio mostrarle fianco a fianco. Ecco come vengono posizionate attualmente le due immagini. Voglio mostrare i due schemi di colori solarizzati fianco a fianco anziché in alto e in basso. L'aiuto sarebbe molto apprezzato, grazie!

Il modo più semplice che riesco a pensare di risolvere questo è usando le tabelle incluse nel markdown aromatizzato di GitHub.

Al tuo esempio specifico sarebbe simile a questo:

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

Questo crea una tabella con Solarized Dark e Ocean come intestazioni e quindi contiene le immagini nella prima riga. Ovviamente lo sostituiresti ...con il link reale. Le :s sono opzionali (centrano semplicemente il contenuto nelle celle, cosa che in questo caso non è necessaria). Inoltre potresti voler ridimensionare le immagini in modo che vengano visualizzate meglio fianco a fianco.

È possibile posizionare ciascuna immagine fianco a fianco scrivendo il markdown per ogni immagine sulla stessa linea.

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

Finché le immagini non sono troppo grandi, verranno visualizzate in linea come dimostrato da questa schermata di un file README da GitHub:

Questo visualizzerà le tre immagini fianco a fianco se le immagini non sono troppo larghe.

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

Simile agli altri esempi, ma usando il dimensionamento HTML, io uso:

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

Ecco un esempio

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

Ho provato questo usando Remarkable .

Se, come me, hai scoperto che la risposta di @wiggin non funzionava e le immagini non apparivano ancora in linea, puoi utilizzare la proprietà 'align' del tag immagine html e alcune interruzioni per ottenere l'effetto desiderato, ad esempio:

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

Ovviamente, devi usare più pause a seconda di quanto sono grandi le immagini: terribile sì, ma ha funzionato per me, quindi ho pensato di condividere.

Questo è il modo migliore per aggiungere immagini / schermate della tua app e mantenere pulito il tuo repository.

Crea una screenshotcartella nel tuo repository e aggiungi le immagini che desideri visualizzare.

Ora vai a README.mde aggiungi questo codice HTML per formare una tabella.

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

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

** Per ottenere il percorso dell'immagine -> Vai alla screenshotcartella e apri imageil tasto e sul lato più a destra, troverai il Copy pathpulsante.

Otterrai una tabella come questa nel tuo repository --->

A cavalluccio di @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>è supportato da GitHub Markdown. Le immagini con diverse altezze potrebbero non essere allineate verticalmente vicino alla parte superiore della cella. Questa proprietà lo gestisce per te.