You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

解决PyPI与GitHub上README.md中图片尺寸不一致的问题

解决PyPI与GitHub上README.md中图片尺寸不一致的问题

我完全懂这种头疼的感觉——明明在GitHub上排版得整整齐齐,推到PyPI就直接“翻车”,表格里的图片大小忽大忽小,看着特别糟心。其实核心问题是PyPI的Markdown/HTML渲染规则和GitHub不一样,它会过滤掉很多CSS样式,你之前用的内联style="width:250px;"大概率被它吃掉了,所以才会失效。

给你几个亲测有效的解决办法,按优先级排序:

1. 预先统一图片的实际尺寸(最稳妥的根治方案)

从根源解决问题永远是最好的。用图片编辑工具(比如GIMP、Photoshop,甚至免费的在线工具)把所有游戏截图都改成相同的宽高(比如250x250),或者至少统一比例。这样不管是GitHub还是PyPI,图片都会自动显示成一样大,完全不需要依赖平台的样式支持,绝对不会出问题。

2. 改用HTML原生的width属性(兼容性最好的平台适配方案)

PyPI对HTML原生属性的支持远好于内联CSS。把你原来img标签里的style="width:250px;"改成width="250",比如:

<img src="https://raw.githubusercontent.com/kamyarmg/oyna/refs/heads/main/docs/images/sudoku.png" alt="Sudoku" width="250" />

修改后的完整表格代码如下:

<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" width="250"/> </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" width="250"/> </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" width="250"/> </td>
   </tr>
</table>

这个方法的成功率极高,因为width是HTML img标签的原生属性,PyPI一般不会过滤它。

3. 尝试Markdown的图片尺寸语法(快捷但兼容性存疑)

有些Markdown渲染器支持直接在图片链接后指定尺寸,格式是![Alt Text](图片链接 =宽度x),比如:

![Sudoku](https://raw.githubusercontent.com/kamyarmg/oyna/refs/heads/main/docs/images/sudoku.png =250x)

不过PyPI的Markdown渲染器对这个语法的支持不稳定,可能有用也可能没用,可以作为备选尝试。

4. 全局CSS类(成功率低,不推荐)

你可以试试在README开头加一个

火山引擎 最新活动