使用 Markdown 在 GitHub 的 wiki 中调整图像大小

Posted 2023-03-05

【中文标题】使用 Markdown 在 GitHub 的 wiki 中调整图像大小

【英文标题】：Resize image in the wiki of GitHub using Markdown

【发布时间】：2014-08-14 13:01:18

【问题描述】：

我正在 GitHub 上写一个 wiki 页面，我正在使用 Markdown。

我的问题是我放了一张大图（这张图在它自己的存储库中），我需要调整它的大小。

我尝试了不同的解决方案，但它们不起作用：

![image](http://url.to/image.png "Title" width=40px height=400px)

![image](http://url.to/image.png = 250x250)

![image](http://url.to/image.png = 250x)

[[http://url.to/image.png = 250x]]

有没有办法得到它？

最好不用 html。

【问题讨论】：

How to change image size Markdown?的可能重复

【参考方案1】：

在 GitHub 上，可以直接使用 HTML 代替 Markdown：

<a href="url"><img src="http://url.to/image.png" align="left"   ></a>

这应该成功了。

【讨论】：

谢谢解决，没有html代码可以吗？

只是要注意，您可以排除width，以便它可以根据高度自动缩放宽度。

不只是在 Github；我相信通常在 Markdown 中允许内联 HTML...

【参考方案2】：

更新：

图像的 Markdown 语法（外部/内部）：

![test](https://github.com/favicon.ico)

调整大小图像的 HTML 代码（内部/外部）：

<img src="https://github.com/favicon.ico" >

例子：

---

旧答案：

这应该可行：

[[ http://url.to/image.png |高度 = 100px ]]

来源：https://guides.github.com/features/mastering-markdown/

【讨论】：

谢谢。 <img src="..." width="48"> 在 README 中用于上传到 GitHub 的图像。

今天测试一下。 Github 不会识别 [](.. =400) 或 [](... =400px) 的语法，所以如果我需要调整图片大小，我必须使用 语法。

如果图像被添加到维基本身，划掉的答案有效。

@Eduardo 所说的...您删除的“旧答案”是我一直在互联网上搜索的内容 - 仍然适用于相对路径（wiki 内的资产）。此外，我必须在表格中添加一两个图像。由于 Markdown 中的典型表格格式，管道字符让我感到悲伤。在表格单元格中转义管道仍然有效：[[ http://url.to/img.png \| height=48px]]。

该问题明确要求使用 Markdown 调整图像大小，那么您能否提供一种方法来做到这一点。我在互联网上搜索，但没有具体的答案。我认为这不应该是一个公认的答案。

【参考方案3】：

这解决了不同的问题，首先如何在 gist（而不是 github）markdown 中获取图像？

---

2015 年 12 月，似乎只有指向文件的链接 github.com 或 cloud.githubusercontent.com 或类似的工作。 对我有用的步骤：

提出一个要点，比如Mygist.md（以及可选的更多文件） 转到最后的“写评论”框 单击“附加文件...通过选择它们”；选择您的本地图像文件 GitHub 在放置图像的位置回显一个长长的字符串，例如  手动将其剪切粘贴到您的Mygist.md。

但是：GitHub 的人们明天可能会改变这种行为，而无需记录它。

【讨论】：

调整大小方面在哪里？

【参考方案4】：

GitHub Pages 现在使用 kramdown 作为其降价引擎，因此您可以使用以下语法：

Here is an inline ![smiley](smiley.png): .

http://kramdown.gettalong.org/syntax.html#images

不过，我还没有在 GitHub wiki 上测试过。

【讨论】：

@nicobo 我试过似乎对外部图像不起作用？

这适用于使用 Jekyll 的 GitHib 页面，仅供参考（我意识到这不完全是 OP 的问题）

【参考方案5】：

在 GitHub 上只有直接 HTML 格式适用于图像的近 5 年之后，在指定一些自定义尺寸时，即使尺寸错误，其他降价选项仍然会阻止图像加载。 我更喜欢指定所需的宽度并自动计算高度，例如，

<img src="https://github.com/your_image.png" alt="Your image title" width="250"/>

【参考方案6】：

我已经使用了上述方法。现在我使用的是一种类似但对我来说更简单的方法。

首先将 README.md 文件添加到您的项目中。 然后将屏幕截图或任何需要的描述图像上传到您的项目主目录。 上传图片资源后，使用html直接引用这些资源，无需使用如下链接

像这样：

<img src="icon.jpg"  >

<p align="center">
  <img src="screen1.png"  >
  <img src="screen2.png"  >
  <img src="screen3.png"  >
</p>

在上面的示例中，我使用段落来并排对齐图像。如果您要使用单个图像，只需使用以下代码

<img src="icon.jpg"  >

祝你有美好的一天！

【参考方案7】：

按百分比调整大小width=50% height=50%。示例：

<img src="https://user-images.githubusercontent.com/16319829/81180309-2b51f000-8fee-11ea-8a78-ddfe8c3412a7.png" width=50% height=50%>

按像素调整大小width="150" height="280"。示例：

<img src="https://user-images.githubusercontent.com/16319829/81180309-2b51f000-8fee-11ea-8a78-ddfe8c3412a7.png"  >

一些提示

要获取图像的 githubusercontent 链接，请将图像拖放到任何问题中，然后从自动生成的代码中复制/粘贴 url。示例代码：![image](https://user-images.githubusercontent.com/16319829/81180309-2b51f000-8fee-11ea-8a78-ddfe8c3412a7.png)

有no way to change the size of an image if the markdown format is of the form []() - 所以现在不要再找了！ - 你必须改用<img>

另一个有用的惯例总结here

以上均来自here