我刚开始使用 Markdown。我喜欢它，但有一件事困扰着我：如何使用 Markdown 更改图像的大小？
该文档仅对图像提供以下建议：
如果可能的话，我希望图片也可以居中。我要的是一般的 Markdown，而不仅仅是 GitHub 是如何做到的。
问问题
1116001 次
34 回答
1436
您可以在 Markdown 中使用一些 HTML：
<img src="drawing.jpg" alt="drawing" width="200"/>
或通过style属性（GitHub 不支持）
<img src="drawing.jpg" alt="drawing" style="width:200px;"/>
或者您可以使用Markdown 和图像对齐的答案中所述的自定义 CSS 文件
另一个文件中的 CSS：
img[alt=drawing] { width: 200px; }
于 2013-02-07T09:26:18.263 回答
439
此处接受的答案不适用于我迄今为止使用的应用程序中可用的任何 Markdown 编辑器，例如 Ghost、Stackedit.io 甚至在 StackOverflow 编辑器中。我在 StackEdit.io 问题跟踪器中找到了解决方法。
解决办法是直接使用HTML语法，效果很好：
<img src="http://....jpg" width="200" height="200" />
于 2014-02-23T17:52:54.617 回答
186
只需使用：
<img src="Assets/icon.png" width="200">
代替：
于 2015-11-06T12:18:18.617 回答
95
如果你正在为 PanDoc 编写 MarkDown，你可以这样做：
{ width=50% }
这将添加style="width: 50%;"到 HTML<img>标记或LaTeX 中[width=0.5\textwidth]。\includegraphics
来源： http: //pandoc.org/MANUAL.html#extension-link_attributes
于 2016-12-15T16:40:15.803 回答
83
结合两个答案，我得出了一个解决方案，可能看起来不那么漂亮，
但它有效！
它会创建一个具有特定大小的缩略图，单击该缩略图可以将您带到最大分辨率的图像。
[<img src="image.png" width="250"/>](image.png)
这是一个例子！我在 Visual Code 和 Github 上对其进行了测试。
感谢您的反馈，我们知道这也适用于：
- GitLab
- Jupyter 笔记本
于 2020-01-31T13:23:10.357 回答
76
也许这最近发生了变化，但Kramdown 文档显示了一个简单的解决方案。
从文档
Here is an inline {:height="36px" width="36px"}.
And here is a referenced ![smile]
[smile]: smile.png
{: height="36px" width="36px"}
在 github 上与 Jekyll 和 Kramdown 一起工作。
于 2015-06-22T07:05:35.967 回答
31
替换为<img src="https://image-url.type" width="200" height="200">
于 2019-10-05T17:32:12.827 回答
27
人们可能会利用可以在几乎所有 Markdown 实现/渲染中设置的alt属性以及基于属性值的 CSS 选择器。优点是可以轻松定义一整套不同的图片大小（以及更多属性）。
降价：
CSS：
img[alt="minipic"] {
max-width: 20px;
display: block;
}
于 2014-10-28T12:36:10.270 回答
20
如果你使用 kramdown，你可以这样做：
{:.foo}
然后将其添加到您的自定义 CSS中：
.foo {
text-align: center;
width: 100px;
}
于 2013-02-04T08:51:32.670 回答
15
如果您在Gihub Flavored Markdown中使用参考样式图像：
Here is an image of tree:
![alt text][tree]{height=400px width=500px}
[//]: # (Image References)
[tree]: ./images/tree.png "This is a tree"
于 2020-04-23T21:12:25.140 回答
13
对于那些对解决方案感兴趣rmarkdown的人knitr。有一些方法可以在.rmd不使用的情况下调整文件中的图像大小html：
您可以简单地通过添加来指定图像的宽度{width=123px}。不要在括号之间引入空格：
{width=250px}
另一种选择是使用knitr::include_graphics：
```{r, fig.cap="image description", out.width = '50%'}
knitr::include_graphics('your-image.png')
```
于 2019-05-09T04:45:06.163 回答
13
这个对我有用，它不在一条线上，但我希望它对你有用。
<div>
<img src="attachment:image.png" width="500" height="300"/>
</div>
于 2020-04-04T18:16:04.987 回答
12
我来到这里寻找答案。这里有一些很棒的建议。并且黄金信息指出markdown完全支持HTMl！
一个好的干净的解决方案总是使用纯 html 语法。带标签。
但是我试图仍然坚持使用 markdown 语法，所以我尝试将它包装在一个标签周围，并在 div 标签内添加我想要的图像的任何属性。它有效！
<div style="width:50%"></div>
所以这种方式支持外部图像！
只是想我会把它放在那里，因为它不在任何答案中。:)
于 2017-05-19T03:45:59.980 回答
11
您也可以将它与 kramdown 一起使用：
markdown
{:.some-css-class style="width: 200px"}
或者
markdown
{:.some-css-class width="200"}
这样，您可以直接将任意属性添加到最后一个 html 元素。要添加类，有一个快捷方式.class.secondclass。
于 2013-11-16T22:18:37.953 回答
11
我编写了简单的标签解析器脚本，以便在Jekyll中使用自定义大小的 img 标签。
https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079
{% img /path/to/img.png 100x200 %}
您可以将文件添加到文件_plugins夹中。
于 2014-09-07T23:16:53.080 回答
10
我知道这个答案有点具体，但它可能会帮助其他有需要的人。
由于使用Imgur 服务上传的照片很多，您可以使用此处详述的 API来更改照片的大小。
在 GitHub 问题评论中上传照片时，它会通过 Imgur 添加，因此如果照片很大，这将有很大帮助。
基本上，您可以将http://i.imgur.com/12345m.jpg代替http://i.imgur.com/12345.jpg用于中等大小的图像。
于 2015-11-09T14:54:53.393 回答
9
对于所有寻找在R markdown/ bookdown中工作的解决方案的人来说，这些以前的解决方案行不通或需要稍作调整：
在职的
追加
{ width=50% }或{ width=50% height=50% }{ width=50% }{ width=50% height=50% }重要提示：宽度和高度之间没有逗号 - 即
{ width=50%, height=30% }不起作用！
附加
{ height="36px" width="36px" }{ height="36px" width="36px" }- 注意：
{:height="36px" width="36px"}来自@sayth 的冒号似乎不适用于 R markdown
不工作：
- 附加
=WIDTHxHEIGHT- 在图形文件的 URL 之后调整图像大小（来自@prosseek）
- 既不
=WIDTHxHEIGHT也不=WIDTH只工作
于 2019-12-06T16:05:49.207 回答
8
如果每个 md 文件中有一个图像，控制图像大小的一种方便方法是：
添加css样式如下：
## Who Invented JSON?
`Douglas Crockford`
Douglas Crockford originally specified the JSON format in the early 2000s.
<style type="text/css">
img {
width: 250px;
}
</style>
输出如下：[![在此处输入图像描述][1]][1]
如果每个 md 页面中有更多图像，那么控制每个图像或每个自定义标签的便捷方法是在 css 中定义每个元素。对于 img 标签的这种情况，我们可以：
//in css or within style tags:
img[alt="Result1"] {
width: 100px;
}
img[alt="Result2"] {
width: 200px;
}
img[alt="Result3"] {
width: 400px;
}
// try in md one of the methods shown below to insert image in your document:
<br/>
<img src="https://i.stack.imgur.com/xUb54.png" alt="Result1"> <br/>
<img src="https://i.stack.imgur.com/xUb54.png" alt="Result2"> <br/>
<img src="https://i.stack.imgur.com/xUb54.png" alt="Result3"> <br/>
<br/>
in md:<br/>
 <br/>
 <br/>
[1]: https://i.stack.imgur.com/xUb54.png
于 2021-06-16T00:11:57.633 回答
7
对于 R-Markdown，上述解决方案都不适合我，所以我转向常规的LaTeX语法，它工作得很好。
\begin{figure}
\includegraphics[width=300pt, height = 125 pt]{drawing.jpg}
\end{figure}
然后，您可以使用例如\begin{center}语句使图像居中。
于 2016-09-05T13:53:05.997 回答
5
使用Flask时（我将它与平面页面一起使用）......我发现在对 markdown 的调用中的扩展中显式启用（由于某种原因不是默认情况下）'attr_list' 可以解决问题 - 然后可以使用属性（对于访问 CSS 也非常有用 - 例如 class="my class" ...）。
FLATPAGES_HTML_RENDERER = prerender_jinja
和功能：
def prerender_jinja(text):
prerendered_body = render_template_string(Markup(text))
pygmented_body = markdown.markdown(prerendered_body, extensions=['codehilite', 'fenced_code', 'tables', 'attr_list'])
return pygmented_body
然后在 Markdown 中：
{: width=200px}
于 2016-02-08T05:10:30.527 回答
5
有添加类和css样式的方法
![pic][logo]{.classname}
然后在下面写下链接和css
[logo]: (picurl)
<style type="text/css">
.classname{
width: 200px;
}
</style>
于 2017-02-06T07:16:11.230 回答
5
在 Jupyter Notebook 中调整 Markdown 图像附件的大小
我正在使用jupyter_core-4.4.0& jupyter 笔记本。
如果您通过将图像插入到降价中来附加图像，如下所示：
这些attachment链接不起作用：
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
这样做。这确实有效。
只需添加 div 括号。
<div>
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
</div>
希望这可以帮助！
于 2019-08-06T21:58:48.897 回答
4
对于在 Google Colaboratory 上使用 Markdown 的用户，无需将图像上传到会话存储文件夹或链接到 Google Drive。如果图像有 URL，并且可以包含在 Jupyter notebook 中，则其大小更改如下：
<img src="https://image.png" width="500" height="500" />
于 2021-06-07T17:13:22.070 回答
3
在大多数 Markdown 渲染器中将呈现向源 URL 添加的相对尺寸。
我们在Corilla中实现了这一点，因为我认为该模式是一种遵循现有工作流程的预期，而不会促使用户依赖基本 HTML 的模式。如果您最喜欢的工具不遵循类似的模式，那么值得提出功能请求。
语法示例：
小猫的例子：
于 2018-02-08T14:13:04.203 回答
3
通过简单的向后兼容 MD：
其中 w, h 定义了要适应的边界框，例如在 Flutter 包中https://pub.dev/packages/flutter_markdown
重新考虑破坏兼容性的 html 变通方法，因为人们可能会使用本机/非 html 组件/应用程序来显示降价。
于 2021-07-27T15:39:55.757 回答
2
如果您无法选择更改初始降价，则此 hack 可能会起作用：
newHtml = oldHtml.replace(/<img/g, '<img height="100"');
我使用它能够在通过电子邮件发送图像之前调整图像大小（因为 Outlook 忽略任何图像 css 样式）
于 2019-02-07T14:47:32.250 回答
2
于 2019-07-22T11:38:58.480 回答
2
如果我们只使用像这样的普通 HTML 图像标签，它就可以工作，如果您使用引导程序进行样式设置。我在用 Jekyll 制作的网站中使用它。
<img class="img-fluid" src="./img/face.jpg" alt="img-verification">
如果我们按照这个例子添加引导类，它就可以正常工作。
于 2021-02-01T06:46:50.963 回答
2
上面所说的纯粹<img ... width="50%">确实适用于我的 Github Readme.md文档。
但是我真正的问题是，图像位于表格单元格内，只是压缩了旁边单元格中的文本。所以另一种方法是在 Markdown 表中设置列宽，但是对于我的早晨来说，这些解决方案似乎并没有足够的降价。
最后我通过简单地用尽可能多的“＆nbsp;”强制旁边的文本单元格解决了这两个问题 根据我的需要。
我希望这有帮助。再见，谢谢大家。
于 2021-02-20T13:36:49.397 回答
1
这将起作用
<style>
img{width: 50%;}
#foo {color: red;}
</style>
<p id="foo">foo</p>
<p style="color: blue">bar</p>
于 2021-09-23T08:32:06.833 回答
0
Tieme 的回答最适合大多数情况。
就我而言，我正在使用 pandoc 将降价转换为乳胶。HTML 标记在这里不起作用。
我的解决方案是重新实现\includegraphics
\let\maxincludegraphics\includegraphics
\renewcommand{\includegraphics}[1]{\maxincludegraphics[max width=\textwidth]{#1}}
这类似于在转换为 HTML 后使用 CSS。
于 2020-02-24T13:27:16.500 回答