How can one display images side by side in a GitHub README md

Question

I m trying to show a comparison between two photos in my README md which is why I want to display them side-by-side  Here is how the two images are placed currently  I want to show the two Solarized color schemes side by side instead of top and bottom  Help would be much appreciated  thanks

User · Answer

To piggyback off of  Maruf Hassan    Title   lt table gt     lt tr gt       lt td gt First Screen Page lt  td gt        lt td gt Holiday Mention lt  td gt        lt td gt Present day in purple and selected day in pink lt  td gt     lt  tr gt     lt tr gt       lt td valign  top  gt  lt img src  screenshots Screenshot 1582745092 png  gt  lt  td gt       lt td valign  top  gt  lt img src  screenshots Screenshot 1582745125 png  gt  lt  td gt       lt td valign  top  gt  lt img src  screenshots Screenshot 1582745139 png  gt  lt  td gt     lt  tr gt    lt  table gt     lt td valign  top  gt     lt  td gt  is supported by GitHub Markdown  Images with varying heights may not vertically align near the top of the cell  This property handles it for you

User · Answer

For markdown table syntax see  https   www markdownguide org extended-syntax  tables  Quick summary  To quickly understand the syntax used in other answers  it helps to start from a more complete intuitive and easier to remember syntax  and then a minimalized version with the same result  Basic example    Header A         Header B           --------------   --------------     row 1 col 1      row 1 col 2        row 2 column 1   row 2 column 2    Same result in a more minimalist form  cell widths can vary    Header A   Header B ---   --- row 1 col 1   row 1 col 2 row 2 column 1   row 2 column 2  And more related to the question  side by side images with labels on top  label 1   label 2 ---   ---     https      image1 png        https      image2 png     use  ---   ---    and  ---  for  text  alignment in the column  respectively  left  right  center

User · Answer

Similar to the other examples  but using html sizing  I use    lt img src  image1 png  width  425   gt   lt img src  image2 png  width  425   gt     Here is an example   lt img src  https   openclipart org image 2400px svg to png 28580 kablam-Number-Animals-1 png  width  200   gt   lt img src  https   openclipart org download 71101 two svg  width  300   gt       I tested this using Remarkable

User · Answer

This is the best way to make add images screenshots of your app and keep your repository look clean   Create a screenshot folder in your repository and add the images you want to display   Now go to README md and add this HTML code to form a table        Flutter App Screenshots   lt table gt     lt tr gt       lt td gt First Screen Page lt  td gt        lt td gt Holiday Mention lt  td gt        lt td gt Present day in purple and selected day in pink lt  td gt     lt  tr gt     lt tr gt       lt td gt  lt img src  screenshots Screenshot 1582745092 png  width 270 height 480 gt  lt  td gt       lt td gt  lt img src  screenshots Screenshot 1582745125 png  width 270 height 480 gt  lt  td gt       lt td gt  lt img src  screenshots Screenshot 1582745139 png  width 270 height 480 gt  lt  td gt     lt  tr gt    lt  table gt      In the  lt td gt  lt img src   COPY IMAGE PATH HERE   width 270 height 480 gt  lt  td gt      To get the image path --  Go to the screenshot folder and open the image and on the right most side  you will find Copy path button   You will get a table like this in your repository---

User · Answer

If  like me  you found that  wiggin answer didn t work and images still did not appear in-line  you can use the  align  property of the html image tag and some breaks to achieve the desired effect  for example     Title   lt img align  left  src    documentation images A jpg  alt  Made with Angular  title  Angular  hspace  20   gt   lt img align  left  src    documentation images B png  alt  Made with Bootstrap  title  Bootstrap  hspace  20   gt   lt img align  left  src    documentation images C png  alt  Developed using Browsersync  title  Browsersync  hspace  20   gt   lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt      Table of Contents      Obviously  you have to use more breaks depending on how big the images are  awful yes  but it worked for me so I thought I d share

User · Answer

This solution allows you to add space in-between the images as well  It combines the best parts of all the existing solutions and doesn t add any ugly table borders   lt p align  quot center quot  gt     lt img alt  quot Light quot  src  quot https      light png quot  width  quot 45  quot  gt   amp nbsp   amp nbsp   amp nbsp   amp nbsp     lt img alt  quot Dark quot  src  quot https      dark png quot  width  quot 45  quot  gt   lt  p gt   The key is adding the  amp nbsp  non-breaking space HTML entities  which you can add and remove in order to customize the spacing  You can see this example live on GitHub here

User · Answer

You can place each image side-by-side by writing the markdown for each image on the same line     alt-text-1  image1 png  title-1     alt-text-2  image2 png  title-2     As long as the images aren t too large  they will display inline as demonstrated by this screen shot of a README file from GitHub

User · Answer

This will display the three images side by side if the images are not too wide    lt p float  left  gt     lt img src   img1 png  width  100    gt     lt img src   img2 png  width  100    gt      lt img src   img3 png  width  100    gt   lt  p gt

User · Answer

The easiest way I can think of solving this is using the tables included in GitHub s flavored markdown   To your specific example it would look something like this   Solarized dark                Solarized Ocean  -------------------------   -------------------------      https      Dark png          https      Ocean png    This creates a table with Solarized Dark and Ocean as headers and then contains the images in the first row  Obviously you would replace the     with the real link  The  s are optional  They just center the content in the cells  which is kinda unnecessary in this case   Also you might want to downsize the images so they will display better side-by-side

[github] How can one display images side by side in a GitHub README.md?

Examples related to github

Examples related to github-flavored-markdown