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

markdown tutorial

Question

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

Answer 1

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>

Answer 2

La manera más fácil que se me ocurre de resolver esto es usando las tables incluidas en el descuento con sabor de GitHub.

Para su ejemplo específico, se vería algo como esto:

Solarized dark             |  Solarized Ocean
:-------------------------:|:-------------------------:
![](https://...Ocean.png)  |  ![](https://...Dark.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 (simplemente centran el contenido en las celdas, lo cual es 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.

Answer 3

Puede colocar cada imagen una al lado de la otra escribiendo la marca para 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:

Answer 4

Si, como yo, descubriste que la respuesta @wiggin no funcionaba y las imágenes aún no aparecían en línea, puedes usar la propiedad ''alinear'' de la etiqueta de imagen html y algunos descansos 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, debes usar más descansos dependiendo de cuán grandes sean las imágenes: horrible sí, pero funcionó para mí, así que pensé en compartirlo.

Answer 5

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 .