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

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

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

Gehen Sie nun zu README.md und fügen Sie diesen HTML-Code ein, um eine Tabelle zu erstellen.

#### Flutter App Screenshots

    Erste Bildschirmseite
    Urlaubserwähnung
    Aktueller Tag in Lila und ausgewählter Tag in Pink

In der ![]((KOPIEREN SIE DEN BILDPFAD HIER))

** Um den Bildpfad zu erhalten --> Gehen Sie zum Screenshot-Ordner, öffnen Sie das Bild und auf der ganz rechten Seite finden Sie die Schaltfläche Pfad kopieren.

Sie erhalten eine Tabelle wie diese in Ihrem Repository--->

Answer 2

Für die Markdown-Tabellensyntax siehe:

https://www.markdownguide.org/extended-syntax/#tables

---

Kurze Zusammenfassung:

Um die Syntax, die in anderen Antworten verwendet wird, schnell zu verstehen, hilft es, von einer vollständigeren, intuitiveren und leichter zu merkenden Syntax auszugehen und dann eine minimalistischere Version mit demselben Ergebnis zu erstellen.

Grundlegendes Beispiel:

| Header A | Header B |
| -------------- | -------------- |
| Zeile 1 Spalte 1 | Zeile 1 Spalte 2 |
| Zeile 2 Spalte 1 | Zeile 2 Spalte 2 |

Dasselbe Ergebnis in einer minimalistischeren Form (Zellenbreiten können variieren):

Header A | Header B
--- | ---
Zeile 1 Spalte 1 | Zeile 1 Spalte 2
Zeile 2 Spalte 1 | Zeile 2 Spalte 2

Und mehr zum Thema: Bilder nebeneinander mit Beschriftungen oben:

Beschriftung 1 | Beschriftung 2
--- | ---
![](https://...image1.png) | ![](https://...image2.png)

( Verwenden Sie :---, ---: und :---: für die (Text-)Ausrichtung in der Spalte, jeweils: links, rechts, zentriert )

Answer 3

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

# Titel

## Inhaltverzeichnis...

Offensichtlich müssen je nach Größe der Bilder mehr Zeilenumbrüche verwendet werden: Schrecklich, aber es hat bei mir funktioniert, deshalb dachte ich, ich würde es teilen.

Answer 4

Um auf @Maruf Hassan aufzubauen

# Titel

    Erste Bildschirmseite
     Urlaubserwähnung
     Aktueller Tag in Lila und ausgewählter Tag in Pink

... wird von GitHub Markdown unterstützt. Bilder mit unterschiedlichen Höhen können sich nicht nahe dem oberen Rand der Zelle vertikal ausrichten. Diese Eigenschaft erledigt das für Sie.

Answer 5

Ich habe einen Weg gefunden, um 3 Bilder links/center/rechts ausgerichtet auf derselben Zeile zu haben, sodass automatisch geeigneter Abstand zwischen ihnen hinzugefügt wird:

So sieht es für meinen speziellen Anwendungsfall aus hier: