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

Question

Ich versuche, einen Vergleich zwischen zwei Fotos in meinem README.md zu zeigen, deshalb möchte ich sie nebeneinander anzeigen. Hier ist, wie die beiden Bilder aktuell platziert sind. Ich möchte die beiden Solarized-Farbschemas anstatt oben und unten nebeneinander anzeigen. Hilfe wäre sehr geschätzt, danke!

Answer 1

Der einfachste Weg, den ich mir vorstellen kann, um dieses Problem zu lösen, ist die Verwendung der in GitHubs Markdown enthaltenen Tabellen.

Anhand Ihres spezifischen Beispiels würde es etwa so aussehen:

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

Dies erstellt eine Tabelle mit Solarized Dark und Ocean als Überschriften und enthält dann die Bilder in der ersten Zeile. Natürlich würden Sie den ... mit dem tatsächlichen Link ersetzen. Die : sind optional (sie zentrieren den Inhalt in den Zellen, was in diesem Fall etwas unnötig ist). Außerdem möchten Sie vielleicht die Größe der Bilder verkleinern, damit sie besser nebeneinander angezeigt werden.

Answer 2

Dies zeigt die drei Bilder nebeneinander an, wenn die Bilder nicht zu breit sind.

Answer 3

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

![Alternativer Text 1](bild1.png "Titel 1") ![Alternativer Text 2](bild2.png "Titel 2")

Solange die Bilder nicht zu groß sind, werden sie inline angezeigt, wie dies anhand dieses Screenshots einer README-Datei von GitHub demonstriert wird:

Answer 4

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

Hier ist ein Beispiel

Ich habe dies mit Remarkable getestet.

Answer 5

Diese Lösung ermöglicht es Ihnen, auch Platz zwischen den Bildern hinzuzufügen. Sie kombiniert die besten Teile aller vorhandenen Lösungen und fügt keine hässlichen Tabellenrand hinzu.

Der Schlüssel liegt darin, die nicht umbrechenden Leerzeichen-HTML-Entitäten hinzuzufügen, die Sie hinzufügen und entfernen können, um den Abstand anzupassen.

Sie können dieses Beispiel live auf GitHub unter transitive-bullshit/nextjs-notion-starter-kit sehen.