python - Image size inconsistency between GitHub and PyPI in README.md - Stack Overflow

admin管理员组

文章数量:1383168

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="/"> Sudoku </a> </br><img src=".png" alt="Sudoku" style="width:250px;"/> </td>
      <td><a href="/">2048</a> </br><img src=".png" alt="2048" style="width:250px;"/> </td>
      <td><a href="/">Matching</a> </br><img src=".png" alt="Matching" style="width:250px;"/> </td>
   </tr>
</table>

Github README.md Image Table:

Pypi Image Table:

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/kamyarmg/oyna/tree/main/src/oyna/sudoku/"> Sudoku </a> </br><img src="https://raw.githubusercontent/kamyarmg/oyna/refs/heads/main/docs/images/sudoku.png" alt="Sudoku" style="width:250px;"/> </td>
      <td><a href="https://github/kamyarmg/oyna/tree/main/src/oyna/twenty_forty_eight_2048/">2048</a> </br><img src="https://raw.githubusercontent/kamyarmg/oyna/refs/heads/main/docs/images/2048.png" alt="2048" style="width:250px;"/> </td>
      <td><a href="https://github/kamyarmg/oyna/tree/main/src/oyna/matching/">Matching</a> </br><img src="https://raw.githubusercontent/kamyarmg/oyna/refs/heads/main/docs/images/matching.png" alt="Matching" style="width:250px;"/> </td>
   </tr>
</table>

Github README.md Image Table:

Pypi Image Table:

• python
• html
• css
• pypi
• markup

Share Improve this question Follow edited Mar 30 at 22:01 kamyarmg asked Mar 30 at 6:37 kamyarmgkamyarmg 95122 gold badges99 silver badges2424 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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>

本文标签： pythonImage size inconsistency between GitHub and PyPI in READMEmdStack Overflow