Como é possível exibir imagens lado a lado em um README.md do GitHub?


165

Estou tentando mostrar uma comparação entre duas fotos no meu README.md e é por isso que quero exibi-las lado a lado. Aqui está como as duas imagens são colocadas atualmente. Quero mostrar os dois esquemas de cores Solarized lado a lado, em vez de superior e inferior. Ajuda seria muito apreciada, obrigado!


Eu criei um pouco ferramenta web que permite que você adicione e imagens align sem escrever a marcação si mesmo: stackoverflow.com/a/32790440/2477619
B12Toaster

1
link de pergunta não funciona
Valentine Zakharenko

Respostas:


270

A maneira mais fácil de resolver isso é usar as tabelas incluídas na remarcação com sabor do GitHub.

Para o seu exemplo específico, seria algo como isto:

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

Isso cria uma tabela com Solarized Dark e Ocean como cabeçalhos e, em seguida, contém as imagens na primeira linha. Obviamente, você substituirá o ...link real. Os :são opcionais (eles apenas centralizam o conteúdo nas células, o que é meio desnecessário neste caso). Além disso, convém reduzir o tamanho das imagens para que elas sejam exibidas melhor lado a lado.


8
![](https://...Ocean.png)entre os colchetes, você pode adicionar o texto alternativo exibido quando você passa o mouse sobre a imagem.
Adi

Esta solução é melhor se você quiser colocar mais imagens na mesma linha no github. Consegui colocar 4 na mesma linha com esta solução, mas apenas 3 com a solução de wigging.
vinzee

Maravilhoso! Funciona com Bitbucket também. (Bem, eu posso garantir, pelo menos, que ele funciona em sua tela de solicitação de recebimento.)
Nate Cozinhe

1
Pena que isso coloca uma borda em torno de suas imagens.

1
@EpicDavi: no contexto do seu código, como você reduz o tamanho das imagens na tabela?
emagar

115

Você pode colocar cada imagem lado a lado, escrevendo a marcação para cada imagem na mesma linha.

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

Contanto que as imagens não sejam muito grandes, elas serão exibidas em linha, como demonstrado por esta captura de tela de um arquivo README do GitHub:

imagens embutidas


não funciona muito bem para mim. uma das imagens (relativas) é um GIF
Ridhwaan Shakeel

@RidhwaanShakeel Não importa se suas imagens são gifs ou não. Coloquei dois gifs com sucesso lado a lado com esse método.
Socowi 9/05/19

Não funcionou para arquivos gif.
uguros 14/06

106

Isso exibirá as três imagens lado a lado se as imagens não forem muito amplas.

<p float="left">
  <img src="/img1.png" width="100" />
  <img src="/img2.png" width="100" /> 
  <img src="/img3.png" width="100" />
</p>

2
Solução excelente e direta, deve ter mais votos positivos.
NikxDa

10
Sim, de fato, deveria ter mais votos positivos! Eu costumava <p align="middle">alinhar as imagens no centro.
Reza rodeio

É possível adicionar um título a cada uma das imagens?
I_told_you_so 12/01

Isto é perfeito! Como permite especificar os tamanhos das imagens.
Kaushal28

1
Prefiro especificar a imagem como uma porcentagem da largura total, por exemplo, width="32%"ao alinhar 3 imagens
Igor Fobia

37

Semelhante aos outros exemplos, mas usando o dimensionamento html, eu uso:

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

Aqui está um exemplo

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

Eu testei isso usando Notável .


4
Eu usei <img height="350" hspace="20"/>como separador entre imagens em um problema ( a resposta de wigging não funcionou).
EmmanuelMess

WoW que editor notável MD notável. Obrigado.
Helder Velez

FINALMENTE! Obrigado :-)
Hernan Arber

Solução excelente e direta, deve ter mais Upvotes.
31318

Isso funciona com imagens maiores também que precisam ser redimensionadas para caber em uma linha.
farhanhubble

8

Se, como eu, você descobriu que a resposta @wiggin não funcionava e as imagens ainda não apareciam alinhadas, você pode usar a propriedade 'align' da marca de imagem html e algumas quebras para obter o efeito desejado, por exemplo:

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

Obviamente, você precisa fazer mais pausas, dependendo do tamanho das imagens: horríveis, sim, mas funcionou para mim, então pensei em compartilhar.


3
Obrigado! Também hspaceé um pequeno truque, se não houver espaço suficiente entre as fotos. Não sabia que o github realmente analisa isso.
NullDev 17/10

7

Essa é a melhor maneira de adicionar imagens / capturas de tela do seu aplicativo e manter seu repositório limpo.

Crie uma screenshotpasta no seu repositório e adicione as imagens que deseja exibir.

Agora vá README.mde adicione este código HTML para formar uma tabela.

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

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

** Para obter o caminho da imagem -> Vá para a screenshotpasta e abra o imagelado direito e, à direita, você encontrará o Copy pathbotão.

Você receberá uma tabela como esta em seu repositório --->

insira a descrição da imagem aqui


Shukran Maruf :) Você fez o meu dia!
MBH

1

Para pegar carona em @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>é suportado pelo GitHub Markdown. Imagens com alturas variadas podem não se alinhar verticalmente perto da parte superior da célula. Essa propriedade lida com você.


Eu não sabia sobre isso. Era o que eu procurava para alinhar a tela automaticamente ao tamanho natural. Obrigado!
Maruf Hassan
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.