Comment afficher les images côte à côte dans un README.md GitHub?


165

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 schémas de couleurs Solarized côte à côte au lieu du haut et du bas. L'aide serait très appréciée, merci!


J'ai créé un petit outil Web qui vous permet d'ajouter et d'aligner des images sans écrire vous-même le balisage: stackoverflow.com/a/32790440/2477619
B12Toaster

1
le lien de la question ne fonctionne pas
Valentine Zakharenko

Réponses:


271

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

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

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

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


8
![](https://...Ocean.png)entre ces accolades carrées, vous pouvez ajouter du texte alternatif qui s'affiche lorsque vous survolez l'image.
Adi

Cette solution est meilleure si vous souhaitez mettre plus d'images sur la même ligne sur github. J'ai réussi à mettre 4 sur la même ligne avec cette solution mais seulement 3 avec la solution de wigging.
vinzee

Merveilleux! Fonctionne également avec Bitbucket. (Eh bien, je peux au moins garantir que cela fonctionne sur leur écran de demande de tirage.)
Nate Cook

1
Dommage que cela mette une bordure autour de vos images.
nomad

1
@EpicDavi: dans le contexte de votre code, comment réduire la taille des images dans le tableau?
emagar

115

Vous pouvez placer chaque image côte à côte en écrivant la démarque de 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:

images en ligne


ne fonctionne pas tout à fait pour moi. l'une des images (relatives) est un gif
Ridhwaan Shakeel

@RidhwaanShakeel Peu importe que vos images soient des gifs ou non. J'ai réussi à placer deux gifs côte à côte avec cette méthode.
Socowi

Ne fonctionnait pas pour les fichiers gif.
uguros le

106

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>

2
Solution géniale et simple, devrait avoir plus de votes positifs.
NikxDa

10
Oui, en effet, il devrait y avoir plus de votes positifs! J'avais l'habitude <p align="middle">d'aligner les images au centre.
Reza Dodge le

Est-il possible d'ajouter un titre à chacune des images?
I_told_you_so

C'est parfait! Comme il permet de spécifier les tailles des images.
Kaushal28

1
Je préfère spécifier l'image en pourcentage de la largeur totale, par exemple width="32%"lors de l'alignement de 3 images
Igor Fobia

37

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="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 Remarkable .


4
J'ai utilisé <img height="350" hspace="20"/>comme séparateur entre les images dans un problème ( la réponse de wigging ne fonctionnait pas).
EmmanuelMess

WoW quel remarquable éditeur md remarquable. Je vous remercie.
Helder Velez

ENFIN! Merci :-)
Hernan Arber

Solution géniale et simple, devrait avoir plus de votes positifs.
M.Innat

Cela fonctionne également avec des images plus grandes qui doivent être redimensionnées pour tenir sur une ligne.
farhanhubble

8

Si, comme moi, vous constatez 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 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.


3
Je vous remercie! C'est aussi hspaceun petit truc sympa s'il n'y a pas assez d'espace entre les images. Je ne savais pas que github analyse cela.
NullDev

7

C'est le meilleur moyen d'ajouter des images / captures d'écran de votre application et de garder votre référentiel propre.

Créez un screenshotdossier dans votre référentiel et ajoutez les images que vous souhaitez afficher.

Maintenant, allez README.mdet ajoutez ce code HTML pour former un tableau.

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

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

** Pour obtenir le chemin de l'image -> Allez dans le screenshotdossier et ouvrez le bouton imageet sur le côté le plus à droite, vous trouverez le Copy pathbouton.

Vous obtiendrez une table comme celle-ci dans votre référentiel --->

entrez la description de l'image ici


Shukran Maruf :) Vous avez fait ma journée!
MBH le

1

Pour se greffer sur @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>est pris en charge par GitHub Markdown. Les images de différentes hauteurs peuvent ne pas s'aligner verticalement près du haut de la cellule. Cette propriété le gère pour vous.


Je ne savais pas. C'était ce que je cherchais pour aligner automatiquement l'écran sur sa taille naturelle. Merci!
Maruf Hassan
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.