I created some simple console games in Python(Oyna Project) and took screenshots of each game to showcase them in the README.md file. I wanted to display these images in a table format both on GitHub and on PyPI.
On GitHub, everything looks fine — the images are well-aligned, and their sizes are consistent. But when I push this library(Oyna) to PyPI, the image sizes look uneven and unbalanced. The problem is that the images themselves are not the same size, and on PyPI, some images appear much smaller or larger than others, making the table look messy.
I've tried adjusting the image sizes using HTML tags and Markdown syntax, but nothing seems to work correctly on PyPI.
How can I make the images show up consistently and evenly on PyPI just like they do on GitHub, even if their original sizes are different?
My code to display the table:
<table>
<tr>
<td><a href="https://github.com/kamyarmg/oyna/tree/main/src/oyna/sudoku/"> Sudoku </a> </br><img src="https://raw.githubusercontent.com/kamyarmg/oyna/refs/heads/main/docs/images/sudoku.png" alt="Sudoku" style="width:250px;"/> </td>
<td><a href="https://github.com/kamyarmg/oyna/tree/main/src/oyna/twenty_forty_eight_2048/">2048</a> </br><img src="https://raw.githubusercontent.com/kamyarmg/oyna/refs/heads/main/docs/images/2048.png" alt="2048" style="width:250px;"/> </td>
<td><a href="https://github.com/kamyarmg/oyna/tree/main/src/oyna/matching/">Matching</a> </br><img src="https://raw.githubusercontent.com/kamyarmg/oyna/refs/heads/main/docs/images/matching.png" alt="Matching" style="width:250px;"/> </td>
</tr>
</table>
Pypi Image Table:
You can solve this issue by resizing the images via usage of html table format since PyPi supports HTML in its Readme files, find a way to tweak the width and or the height, however monitor the aspect ratio of the image and perhaps focus only on the width of the image since most browser calculate other dimension for you to avoid distortion of your image.
For example, here is a way you can go with it on your Readme file:
<table>
<tr>
<td>
<img src="my imageA.png" width="180">
</td>
</tr>
</table>