Wie kann man Bilder in einem GitHub README.md nebeneinander anzeigen?

163

Ich versuche, einen Vergleich zwischen zwei Fotos in meiner README.md anzuzeigen, weshalb ich sie nebeneinander anzeigen möchte. Hier ist , wie die beiden Bilder angeordnet sind zur Zeit. Ich möchte die beiden solarisierten Farbschemata nebeneinander anstatt oben und unten anzeigen. Hilfe wäre sehr dankbar, danke!

saadq
quelle
Ich habe ein kleines Web-Tool erstellt, mit dem Sie Bilder hinzufügen und ausrichten können, ohne das Markup selbst zu schreiben: stackoverflow.com/a/32790440/2477619
B12Toaster
1
Link von Frage funktioniert nicht
Valentine Zakharenko

Antworten:

267

Der einfachste Weg, dies zu lösen, ist die Verwendung der Tabellen in GitHubs aromatisiertem Markdown.

Für Ihr spezielles Beispiel würde es ungefähr so ​​aussehen:

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

Dadurch wird eine Tabelle mit Solarized Dark und Ocean als Überschriften erstellt, die dann die Bilder in der ersten Zeile enthält. Offensichtlich würden Sie das durch ...den echten Link ersetzen . Die :s sind optional (sie zentrieren nur den Inhalt in den Zellen, was in diesem Fall irgendwie unnötig ist). Möglicherweise möchten Sie auch die Bilder verkleinern, damit sie nebeneinander besser angezeigt werden.

EpicDavi
quelle
8
![](https://...Ocean.png)Zwischen diesen eckigen Klammern können Sie Alt-Text hinzufügen, der angezeigt wird, wenn Sie mit der Maus über das Bild fahren.
Adi
Diese Lösung ist besser, wenn Sie mehr Bilder in derselben Zeile auf Github platzieren möchten. Ich habe es geschafft, mit dieser Lösung 4 auf die gleiche Linie zu setzen, aber nur 3 mit der Wigging-Lösung.
Vinzee
Wunderbar! Funktioniert auch mit Bitbucket. (Nun, ich kann zumindest dafür bürgen, dass es auf ihrem Pull-Request-Bildschirm funktioniert.)
Nate Cook
1
Schade, dass dies einen Rahmen um Ihre Bilder setzt.
Nomade
1
@EpicDavi: Wie können Sie im Kontext Ihres Codes Bilder in der Tabelle verkleinern?
Emagar
115

Sie können jedes Bild nebeneinander platzieren, indem Sie den Markdown für jedes Bild in dieselbe Zeile schreiben.

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

Solange die Bilder nicht zu groß sind, werden sie inline angezeigt, wie dieser Screenshot einer README-Datei von GitHub zeigt:

Inline-Bilder

wackeln
quelle
funktioniert bei mir nicht ganz. Eines der (relativen) Bilder ist ein
GIF
@RidhwaanShakeel Es spielt keine Rolle, ob Ihre Bilder Gifs sind oder nicht. Ich habe mit dieser Methode zwei Gifs erfolgreich nebeneinander platziert.
Socowi
Funktionierte nicht für GIF-Dateien.
Uguros
105

Dadurch werden die drei Bilder nebeneinander angezeigt, wenn die Bilder nicht zu breit sind.

<p float="left">
  <img src="/img1.png" width="100" />
  <img src="/img2.png" width="100" /> 
  <img src="/img3.png" width="100" />
</p>
simibac
quelle
2
Tolle und unkomplizierte Lösung, sollte mehr positive Stimmen haben.
NikxDa
10
Ja, in der Tat sollte es mehr positive Stimmen geben! Ich habe <p align="middle">die Bilder in der Mitte ausgerichtet.
Reza Dodge
Ist es möglich, jedem Bild einen Titel hinzuzufügen?
random9
Dies ist perfekt! Da es erlaubt, die Größe der Bilder anzugeben.
Kaushal28
1
Ich bevorzuge es, das Bild als Prozentsatz der Gesamtbreite anzugeben, z. B. width="32%"beim Ausrichten von 3 Bildern
Igor Fobia
37

Ähnlich wie bei den anderen Beispielen, aber mit HTML-Größe, verwende ich:

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

Hier ist ein Beispiel

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

Ich habe dies mit Remarkable getestet .

Steven C. Howell
quelle
4
Ich habe <img height="350" hspace="20"/>als Trennzeichen zwischen Bildern in einer Ausgabe verwendet ( die Antwort von Wigging hat nicht funktioniert).
EmmanuelMess
WoW was für ein bemerkenswerter bemerkenswerter MD-Editor. Danke dir.
Helder Velez
ENDLICH! Danke :-)
Hernan Arber
Tolle und unkomplizierte Lösung, sollte mehr Upvotes haben.
iNet
Dies funktioniert auch bei größeren Bildern, deren Größe geändert werden muss, damit sie in eine Zeile passen.
Farhanhubble
8

Wenn Sie wie ich festgestellt haben, dass die Antwort von @wiggin nicht funktioniert hat und die Bilder immer noch nicht inline angezeigt werden, können Sie die Eigenschaft 'align' des HTML-Bild-Tags und einige Unterbrechungen verwenden, um den gewünschten Effekt zu erzielen. Beispiel:

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

Natürlich muss man mehr Pausen einlegen, je nachdem wie groß die Bilder sind: schrecklich ja, aber es hat bei mir funktioniert, also dachte ich, ich würde es teilen.

LJH
quelle
3
Danke dir! Auch hspaceist ein kleiner Trick, wenn zwischen den Bildern nicht genügend Platz ist. Ich wusste nicht, dass Github das tatsächlich analysiert.
NullDev
7

Dies ist der beste Weg, um Bilder / Screenshots Ihrer App hinzuzufügen und Ihr Repository sauber zu halten.

Erstellen Sie einen screenshotOrdner in Ihrem Repository und fügen Sie die Bilder hinzu, die Sie anzeigen möchten.

Gehen Sie nun zu README.mdund fügen Sie diesen HTML-Code hinzu, um eine Tabelle zu bilden.

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

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

** Um den Bildpfad zu erhalten -> Gehen Sie zum screenshotOrdner und öffnen imageSie die Copy pathSchaltfläche und ganz rechts finden Sie die Schaltfläche.

Sie erhalten eine solche Tabelle in Ihrem Repository --->

Geben Sie hier die Bildbeschreibung ein

Maruf Hassan
quelle
Shukran Maruf :) Du hast meinen Tag gemacht!
MBH
1

Zum Huckepack von @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>wird von GitHub Markdown unterstützt. Bilder mit unterschiedlichen Höhen werden möglicherweise nicht vertikal nahe der Oberseite der Zelle ausgerichtet. Diese Eigenschaft behandelt es für Sie.

Whataconundrum
quelle
Ich wusste nichts davon. Es war das, wonach ich suchte, um den Bildschirm automatisch auf ihre natürliche Größe auszurichten. Vielen Dank!
Maruf Hassan