Próbuję pokazać porównanie dwóch zdjęć w moim pliku README.md, dlatego chcę je wyświetlić obok siebie. Oto, jak obecnie rozmieszczone są dwa obrazy. Chcę pokazać obok siebie dwa schematy kolorów Solarized zamiast góry i dołu. Pomoc byłaby bardzo mile widziana, dzięki!
164
Odpowiedzi:
Najłatwiejszym sposobem rozwiązania tego problemu jest użycie tabel zawartych w aromatyzowanych przecenach GitHub.
W twoim konkretnym przykładzie wyglądałoby to mniej więcej tak:
Spowoduje to utworzenie tabeli z nagłówkami Solarized Dark i Ocean, a następnie zawiera obrazy z pierwszego wiersza. Oczywiście zastąpiłbyś
...
prawdziwy link. Te:
są opcjonalne (po prostu wyśrodkowują zawartość w komórkach, co w tym przypadku jest trochę niepotrzebne). Możesz także zmniejszyć rozmiar obrazów, aby były lepiej wyświetlane obok siebie.źródło
![](https://...Ocean.png)
między tymi nawiasami kwadratowymi możesz dodać tekst alternatywny, który jest wyświetlany po najechaniu kursorem na obraz.Możesz umieścić każdy obraz obok siebie, wpisując znacznik dla każdego obrazu w tej samej linii.
Dopóki obrazy nie są zbyt duże, będą wyświetlane w tekście, jak pokazano na poniższym zrzucie ekranu pliku README z GitHub:
źródło
Spowoduje to wyświetlenie trzech obrazów obok siebie, jeśli obrazy nie są zbyt szerokie.
źródło
<p align="middle">
wyrównywałem obrazy na środku.width="32%"
wyrównywaniu 3 obrazówPodobnie jak w innych przykładach, ale używając rozmiaru html, używam:
Oto przykład
Przetestowałem to używając Remarkable .
źródło
<img height="350" hspace="20"/>
jako separatora między obrazami w numerze ( odpowiedź wigowania nie zadziałała).Jeśli, tak jak ja, okazało się, że odpowiedź @wiggin nie działa, a obrazy nadal nie pojawiają się w linii, możesz użyć właściwości `` align '' tagu obrazu html i kilku przerw, aby osiągnąć pożądany efekt, na przykład:
Oczywiście musisz użyć więcej przerw w zależności od tego, jak duże są obrazy: okropne tak, ale zadziałało dla mnie, więc pomyślałem, że się podzielę.
źródło
hspace
jest schludny mały trick, jeśli nie ma wystarczająco dużo miejsca między obrazami. Nie wiedziałem, że github faktycznie to analizuje.Jest to najlepszy sposób na dodawanie obrazów / zrzutów ekranu aplikacji i utrzymanie porządku w repozytorium.
Utwórz
screenshot
folder w swoim repozytorium i dodaj obrazy, które chcesz wyświetlić.Teraz przejdź do
README.md
i dodaj ten kod HTML, aby utworzyć tabelę.w
<td><img src="(COPY IMAGE PATH HERE)" width=270 height=480></td>
** Aby uzyskać ścieżkę obrazu -> Przejdź do
screenshot
folderu i otwórz,image
a po prawej stronie znajduje sięCopy path
przycisk.Otrzymasz taką tabelę w swoim repozytorium --->
źródło
Na barku z @Maruf Hassan
<td valign="top">...</td>
jest obsługiwany przez GitHub Markdown. Obrazy o różnych wysokościach mogą nie być wyrównane w pionie w pobliżu górnej części komórki. Ta właściwość obsługuje to za Ciebie.źródło