Comment peut-on Afficher des images côte à côte dans un GitHub README.md?
J'essaie de montrer une comparaison entre deux photos dans mon README.md c'est pourquoi je veux les afficher côte à côte. Voici comment les deux images sont placées actuellement. Je veux montrer les deux couleurs Solarisées côte à côte au lieu de haut et de bas. De l'aide serait apprécié, merci!
5 réponses
La façon la plus simple de résoudre ce problème est d'utiliser les tables incluses dans le markdown aromatisé de GitHub.
Pour votre exemple spécifique, cela ressemblerait à ceci:
Solarized dark | Solarized Ocean
:-------------------------:|:-------------------------:
 | 
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 ... par le vrai lien. Les : sont facultatifs (ils centrent simplement le contenu dans les cellules, ce qui est un peu inutile dans ce cas). Aussi, vous vous pouvez réduire la taille des images afin qu'elles s'affichent mieux côte à côte.
Vous pouvez placer chaque image côte à côte en écrivant le markdown pour chaque image sur la même ligne.
 
Tant que les images ne sont pas trop grandes, elles s'afficheront en ligne comme le démontre cette capture d'écran D'un fichier README de GitHub:
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>
Similaire aux autres exemples, mais en utilisant le dimensionnement html, j'utilise:
<img src="image1.png" width="425"/> <img src="image2.png" width="425"/>
Voici un exemple
<img src="/images/content/24319505/7cfc914ab9fc8255b9008a650e780ee1.png" width="200"/> <img src="/images/content/24319505/7ae5d0b177f1b4e4296238802d4abae6.svg" width="300"/>
J'ai testé cela en utilisant remarquable .
Si, comme moi, vous avez trouvé que la réponse @wiggin ne fonctionnait pas et que les images n'apparaissaient toujours pas en ligne, vous pouvez utiliser la propriété 'align' de la balise d'image html et quelques pauses pour obtenir l'effet désiré, 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: terrible Oui, mais cela a fonctionné pour moi, alors j'ai pensé partager.