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!
163
Antworten:
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:
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.quelle
![](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.Sie können jedes Bild nebeneinander platzieren, indem Sie den Markdown für jedes Bild in dieselbe Zeile schreiben.
Solange die Bilder nicht zu groß sind, werden sie inline angezeigt, wie dieser Screenshot einer README-Datei von GitHub zeigt:
quelle
Dadurch werden die drei Bilder nebeneinander angezeigt, wenn die Bilder nicht zu breit sind.
quelle
<p align="middle">
die Bilder in der Mitte ausgerichtet.width="32%"
beim Ausrichten von 3 BildernÄhnlich wie bei den anderen Beispielen, aber mit HTML-Größe, verwende ich:
Hier ist ein Beispiel
Ich habe dies mit Remarkable getestet .
quelle
<img height="350" hspace="20"/>
als Trennzeichen zwischen Bildern in einer Ausgabe verwendet ( die Antwort von Wigging hat nicht funktioniert).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:
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.
quelle
hspace
ist ein kleiner Trick, wenn zwischen den Bildern nicht genügend Platz ist. Ich wusste nicht, dass Github das tatsächlich analysiert.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 hinzu, um eine Tabelle zu bilden.In dem
<td><img src="(COPY IMAGE PATH HERE)" width=270 height=480></td>
** Um den Bildpfad zu erhalten -> Gehen Sie zum
screenshot
Ordner und öffnenimage
Sie dieCopy path
Schaltfläche und ganz rechts finden Sie die Schaltfläche.Sie erhalten eine solche Tabelle in Ihrem Repository --->
quelle
Zum Huckepack von @Maruf Hassan
<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.quelle