web-dev-qa-db-fra.com

Comment peut-on afficher des images côte à côte dans un fichier GitHub README.md?

J'essaie de comparer deux photos dans mon fichier README.md, c'est pourquoi je souhaite les afficher côte à côte. Ici est la façon dont les deux images sont placées actuellement. Je souhaite afficher les deux jeux de couleurs Solarized côte à côte au lieu de haut et de bas. L'aide serait très appréciée, merci!

githubgithub-flavored-markdown
114
saadq

Le moyen le plus simple de résoudre ce problème consiste à utiliser les tables incluses dans le markdown aromatisé de GitHub.

Pour votre exemple spécifique, cela ressemblerait à quelque chose comme ceci:

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

Cela crée une table avec Solarized Dark et Ocean comme en-têtes, puis contient les images de la première ligne. Évidemment vous remplaceriez le ... avec le lien réel. Le :s sont facultatifs (ils centrent simplement le contenu dans les cellules, ce qui est un peu inutile dans ce cas). Aussi, vous voudrez peut-être réduire la taille des images afin qu'elles s'affichent mieux côte à côte.

180
EpicDavi

Vous pouvez placer chaque image côte à côte en écrivant le démarque pour chaque image sur la même ligne.

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

Tant que les images ne sont pas trop grandes, elles s'afficheront en ligne, comme le montre cette capture d'écran d'un fichier README de GitHub:

inline images

96
wigging

Cela affichera les trois images côte à côte si les images ne sont pas trop larges.

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

Semblable aux autres exemples, mais en utilisant la taille html, j’utilise:

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

Voici un exemple

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

J'ai testé cela en utilisant Remarquable .

30
Steven C. Howell

Si, comme moi, vous avez constaté que la réponse @wiggin ne fonctionnait pas et que les images n'apparaissaient toujours pas en ligne, vous pouvez utiliser la propriété "aligner" de la balise d'image html et quelques interruptions pour obtenir l'effet souhaité, par exemple:

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

Évidemment, vous devez utiliser plus de pauses en fonction de la taille des images: horrible oui, mais cela a fonctionné pour moi, alors j'ai pensé partager.

6
LJH