¿Cómo se pueden mostrar imágenes una al lado de la otra en un archivo README.md de GitHub?


165

Estoy tratando de mostrar una comparación entre dos fotos en mi README.md, por eso quiero mostrarlas una al lado de la otra. Aquí es cómo las dos imágenes se colocan actualmente. Quiero mostrar los dos esquemas de color solarizados uno al lado del otro en lugar de arriba y abajo. La ayuda sería muy apreciada, gracias!



1
el enlace de la pregunta no funciona
Valentine Zakharenko

Respuestas:


271

La forma más fácil en que puedo pensar en resolver esto es usando las tablas incluidas en la reducción de sabor de GitHub.

Para su ejemplo específico, se vería así:

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

Esto crea una tabla con Solarized Dark y Ocean como encabezados y luego contiene las imágenes en la primera fila. Obviamente reemplazarías el ...con el enlace real. Los :s son opcionales (solo centran el contenido en las celdas, lo cual es un poco innecesario en este caso). También es posible que desee reducir el tamaño de las imágenes para que se muestren mejor una al lado de la otra.


8
![](https://...Ocean.png)entre esos corchetes puede agregar texto alternativo que se muestra al pasar el mouse sobre la imagen.
Adi

Esta solución es mejor si desea poner más imágenes en la misma línea en github. Logré poner 4 en la misma línea con esta solución, pero solo 3 con la solución de wigging.
vinzee

¡Maravilloso! Funciona con Bitbucket también. (Bueno, puedo garantizar al menos que funciona en su pantalla de solicitud de extracción.)
Nate Cook,

1
Lástima que esto ponga un borde alrededor de sus imágenes.
nómada

1
@EpicDavi: en el contexto de su código, ¿cómo reduce el tamaño de las imágenes dentro de la tabla?
Emagar

115

Puede colocar cada imagen una al lado de la otra escribiendo la rebaja de cada imagen en la misma línea.

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

Siempre que las imágenes no sean demasiado grandes, se mostrarán en línea como lo demuestra esta captura de pantalla de un archivo README de GitHub:

imágenes en línea


no funciona para mí una de las imágenes (relativas) es un gif
Ridhwaan Shakeel

@RidhwaanShakeel No importa si tus imágenes son gifs o no. Coloqué con éxito dos gifs lado a lado con este método.
Socowi

No funcionó para archivos gif.
uguros

106

Esto mostrará las tres imágenes una al lado de la otra si las imágenes no son demasiado anchas.

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

2
Excelente y directa solución, debería tener más votos a favor.
NikxDa

10
Sí, de hecho, ¡debería tener más votos a favor! Solía <p align="middle">alinear las imágenes en el centro.
Reza Dodge el

¿Es posible agregar un título a cada una de las imágenes?
Te dije que el

¡Esto es perfecto! Como permite especificar los tamaños de las imágenes.
Kaushal28

1
Prefiero especificar la imagen como un porcentaje del ancho total, por ejemplo, width="32%"al alinear 3 imágenes
Igor Fobia

37

Similar a los otros ejemplos, pero usando el tamaño html, uso:

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

Aquí hay un ejemplo

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

Probé esto usando Remarkable .


44
Utilicé <img height="350" hspace="20"/>como separador entre imágenes en un problema ( la respuesta de wigging no funcionó).
EmmanuelMess

¡Qué increíble editor de MD notable! Gracias.
Helder Velez

¡FINALMENTE! Gracias :-)
Hernan Arber

Excelente y directa solución, debería tener más votos a favor.
M.Innat

Esto también funciona con imágenes más grandes que necesitan cambiar el tamaño para que quepan en una fila.
farhanhubble

8

Si, como yo, descubrió que la respuesta @wiggin no funcionaba y las imágenes aún no aparecían en línea, puede usar la propiedad 'alinear' de la etiqueta de imagen html y algunas pausas para lograr el efecto deseado, por ejemplo:

# 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, tienes que usar más descansos dependiendo de qué tan grandes sean las imágenes: horrible sí, pero funcionó para mí, así que pensé en compartir.


3
¡Gracias! También hspacees un pequeño truco si no hay suficiente espacio entre las imágenes. No sabía que Github realmente analiza eso.
NullDev

7

Esta es la mejor manera de agregar imágenes / capturas de pantalla de su aplicación y mantener limpio su repositorio.

Cree una screenshotcarpeta en su repositorio y agregue las imágenes que desea mostrar.

Ahora ve README.mdy agrega este código HTML para formar una tabla.

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

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

** Para obtener la ruta de la imagen -> Vaya a la screenshotcarpeta y abra el imagey en el lado derecho, encontrará el Copy pathbotón.

Obtendrá una tabla como esta en su repositorio --->

ingrese la descripción de la imagen aquí


Shukran Maruf :) Me alegraste el día!
MBH

1

Para llevar a cuestas a @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>es compatible con GitHub Markdown. Las imágenes con diferentes alturas pueden no alinearse verticalmente cerca de la parte superior de la celda. Esta propiedad lo maneja por usted.


Yo no sabía sobre esto. Era lo que estaba buscando para alinear la pantalla automáticamente a su tamaño natural. ¡Gracias!
Maruf Hassan
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.