Jak można wyświetlać obrazy obok siebie w GitHub README.md?

164

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!

saadq
źródło
Stworzyłem małe narzędzie internetowe, które umożliwia dodawanie i wyrównywanie obrazów bez samodzielnego pisania znaczników: stackoverflow.com/a/32790440/2477619
B12Toaster
1
link z pytania nie działa
Valentine Zakharenko

Odpowiedzi:

270

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:

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

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.

EpicDavi
źródło
8
![](https://...Ocean.png)między tymi nawiasami kwadratowymi możesz dodać tekst alternatywny, który jest wyświetlany po najechaniu kursorem na obraz.
Adi,
To rozwiązanie jest lepsze, jeśli chcesz umieścić więcej obrazów w tej samej linii na githubie. Udało mi się ustawić 4 na tej samej linii z tym rozwiązaniem, ale tylko 3 z rozwiązaniem wigging.
vinzee,
Wspaniale! Działa również z Bitbucket. (Cóż, mogę przynajmniej ręczyć, że działa na ich ekranie żądania ściągnięcia.)
Nate Cook,
1
Szkoda, że ​​tworzy to obramowanie wokół twoich obrazów.
nomad
1
@EpicDavi: w kontekście twojego kodu, jak zmniejszasz rozmiar obrazów w tabeli?
emagar
115

Możesz umieścić każdy obraz obok siebie, wpisując znacznik dla każdego obrazu w tej samej linii.

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

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:

obrazy w tekście

bura
źródło
nie działa dla mnie całkiem. jednym z (względnych) obrazów jest gif
Ridhwaan Shakeel
@RidhwaanShakeel Nie ma znaczenia, czy Twoje obrazy to gify, czy nie. Dzięki tej metodzie z powodzeniem umieściłem dwa gify obok siebie.
Socowi
Nie działa dla plików gif.
uguros
105

Spowoduje to wyświetlenie trzech obrazów obok siebie, jeśli obrazy nie są zbyt szerokie.

<p float="left">
  <img src="/img1.png" width="100" />
  <img src="/img2.png" width="100" /> 
  <img src="/img3.png" width="100" />
</p>
simibac
źródło
2
Świetne i proste rozwiązanie, powinno mieć więcej głosów pozytywnych.
NikxDa
10
Tak, rzeczywiście, powinno mieć więcej głosów pozytywnych! Kiedyś <p align="middle">wyrównywałem obrazy na środku.
Reza Dodge
Czy do każdego zdjęcia można dodać tytuł?
I_told_you_so
To jest doskonałe! Ponieważ pozwala określić rozmiary obrazów.
Kaushal28
1
Wolę określić obraz jako procent całkowitej szerokości, np. Przy width="32%"wyrównywaniu 3 obrazów
Igor Fobia
37

Podobnie jak w innych przykładach, ale używając rozmiaru html, używam:

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

Oto przykład

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

Przetestowałem to używając Remarkable .

Steven C. Howell
źródło
4
Użyłem <img height="350" hspace="20"/>jako separatora między obrazami w numerze ( odpowiedź wigowania nie zadziałała).
EmmanuelMess
WoW, co za niezwykły, niezwykły edytor md. Dziękuję Ci.
Helder Velez
WRESZCIE! Dzięki :-)
Hernan Arber
Świetne i proste rozwiązanie, powinno mieć więcej głosów za.
iNet
Działa to również w przypadku większych obrazów, które wymagają zmiany rozmiaru, aby zmieściły się w jednym wierszu.
farhanhubble
8

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:

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

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

LJH
źródło
3
Dziękuję Ci! Również hspacejest schludny mały trick, jeśli nie ma wystarczająco dużo miejsca między obrazami. Nie wiedziałem, że github faktycznie to analizuje.
NullDev
7

Jest to najlepszy sposób na dodawanie obrazów / zrzutów ekranu aplikacji i utrzymanie porządku w repozytorium.

Utwórz screenshotfolder w swoim repozytorium i dodaj obrazy, które chcesz wyświetlić.

Teraz przejdź do README.mdi dodaj ten kod HTML, aby utworzyć tabelę.

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

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

** Aby uzyskać ścieżkę obrazu -> Przejdź do screenshotfolderu i otwórz, imagea po prawej stronie znajduje się Copy pathprzycisk.

Otrzymasz taką tabelę w swoim repozytorium --->

wprowadź opis obrazu tutaj

Maruf Hassan
źródło
Shukran Maruf :) Zrobiłeś mój dzień!
MBH
1

Na barku z @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>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.

whataconundrum
źródło
Nie wiedziałem o tym. Właśnie tego szukałem, aby automatycznie wyrównać ekran do ich naturalnego rozmiaru. Dzięki!
Maruf Hassan