我刚刚开始使用Markdown。我很喜欢它，但是有一件事情让我很烦恼：我怎样才能使用Markdown更改图片的大小？
文档只给出了以下建议：
如果可能的话，我希望图片也居中。我要求一般的Markdown格式，而不仅限于GitHub的格式。
40个回答
1751
您可以在Markdown中使用一些HTML标签来实现它：
您可以在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; }
- Tieme
8
73在大多数网站（例如GitHub）中，使用内联
style样式不起作用，因为它会被清理。建议使用@kushdillip提到的width和height来替代。 - Ciro Santilli OurBigBook.com9基于alt属性的解决方案很糟糕，你不应该使用它，因为它会破坏可访问性。 - Regnareb
11建议使用百分比代替设备相关像素作为单位是否可行？例如：
<img src="drawing.jpg" alt="drawing" width="50%"/>。我在 GitHub 上测试过，效果很好。 - VasiliNovikov1这个解决方案对我有效。 <img src="https://miro.medium.com/max/1400/1*bSLNlG7crv-p-m4LVYYk3Q.png" width="450" height="250"> - Jorge Santos Neill
3
alt 属性始终作为图像无法加载或用户无法查看时的替代内容显示。它的功能完全相同。您可能考虑了另一个属性 title，它可以生成悬停文本。如果未提供 title，某些浏览器将在两个位置显示 alt 文本。该无障碍问题是合理的。 - maco显示剩余3条评论
865
- prosseek
22
46请注意，在等号后面不能有空格。正确的写法是：""，错误的写法是：""。 - cantdutchthis
85不在标准范围内，因此它不能与每个Markdown解析器一起使用。 - Marius Soutier
29似乎不能与我在Jekyll中使用的Redcarpet插件配合使用，所以我会使用HTML，就像@Tieme回答的那样。如果你最终将Markdown通过喜欢标准格式的解析器运行，那么HTML也能够正常工作。 - user766353
11在Bitbucket的维基中也无法正常工作。它被错误地转换为
title属性。 - RZKY23无效，但 HTML 标签 <img src=http//... width="..." height="..."> 有效。 - BK Batchelor
显示剩余17条评论
494
这里被接受的答案在我使用过的所有Markdown编辑器中都无法工作，比如Ghost、Stackedit.io或者甚至是StackOverflow编辑器。我在StackEdit.io问题跟踪器中找到了一个解决方法。
解决方案是直接使用HTML语法，它可以完美地工作：
<img src="http://....jpg" width="200" height="200" />
- kushdilip
7
15这对我非常有效！在 GitHub Markdown 中，内联 CSS 无法正常工作，但“老派”的高度/宽度属性完全可以胜任。 - niczak
8GitHub 点了个赞。 - Teoman shipahi
1这很棒，但不在我的 GitHub 上的 ipython 笔记本中。 - eric
2请注意，在 Stack Exchange 网站上，您必须使用此确切格式，似乎不允许使用其他属性（甚至不包括
alt）（您可以省略 width 或 height，并且 /> 前的空格是可选的，但除此之外不允许额外的空格）。相比之下，GitHub 还支持（至少）alt 和 title 属性，并允许额外的空格。 - mklement03在Stack Overflow上，简单的解决方案是链接到图片的不同版本。每个上传的图像都会呈现出六个不同的版本，您可以通过在“.png”扩展名之前添加一个字符来切换所需的大小。有关详细信息，请参见https://meta.stackoverflow.com/questions/253403/how-to-reduce-image-size-on-stack-overflow。 - tripleee
显示剩余2条评论
211
只需使用：
<img src="Assets/icon.png" width="200">
改为：
- Bartłomiej Semańczyk
4
4大多数Markdown实现都有修改后的语法，因此您不需要插入原始的HTML标记，但是如果您使用的实现没有该功能，则应执行此操作。 - Nick McCurdy
3在 GitHub 上兼容。 - thanos.a
适用于Gitlab。 - Gianluca Veschi
在Jupyter中无法工作。 - SteveWithamDuplicate
150
结合两个答案，我找到了一个解决方案，可能看起来不太漂亮，但它有效！它会创建一个特定尺寸的缩略图，点击它可以查看最大分辨率的图像。
这是一个例子！我在Visual Code和Github上进行了测试。 {{link1：
}}
感谢反馈，我们知道这也适用于以下平台：
- GitLab - Jupyter Notebook - StackOverflow
[<img src="image.png" width="250"/>](image.png)
这是一个例子！我在Visual Code和Github上进行了测试。 {{link1：
}}感谢反馈，我们知道这也适用于以下平台：
- GitLab - Jupyter Notebook - StackOverflow
- proximab
9
5非常好。可以与GitLab企业版配合使用。 - Sven Haile
如果我有一个 Markdown 链接：
[myLink]: ./image.png，我该如何应用此解决方案以避免重复的 src？例如：[<img src="[myLink]" width="250"/>](image.png) - Victor Zanella2非常感谢，这个选项是在Jupyter笔记本中使用的最佳选择。 - Lwi
@Lwi 我很高兴我能帮助到你。 - proximab
2非常好的答案，谢谢。 - Spencer Davis
显示剩余4条评论
127
如果您正在为PanDoc编写Markdown，可以这样做：
{ width=50% }
这将在HTML的
来源：http://pandoc.org/MANUAL.html#extension-link_attributes
- rudolfbyker
7
2这甚至比直接指定点大小更漂亮。我很高兴 Pandoc 选择了这种方法！ - jciloa
2@m0z4rt，GitHub 可能不使用 PanDoc 来渲染 MarkDown。 - rudolfbyker
3@rudolfbyker非常感谢。对于Mkdocs-material，只需在mkdocs.yml中的markdown_extensions中添加
-attr_list即可解决问题。 - Lilya适用于 R v. 4.2.0 和
tinytex！ - fitzberg最近，Gitlab在使用富文本编辑时采用了这种格式。@VonC几个月前已经提到过这一点。 - Bit-Man
显示剩余2条评论
83
也许最近发生了变化，但Kramdown文档中显示了一种简单的解决方案。
来自文档：
Here is an inline {:height="36px" width="36px"}.
And here is a referenced ![smile]
[smile]: smile.png
{: height="36px" width="36px"}
使用Jekyll和Kramdown在GitHub上工作。
- sayth
6
10以前可能可行，但现在在Github上无效。使用带有宽度和高度的老式<img>标签仍然有效。 - mez.pahlan
3如果你使用Kramdown或默认使用Kramdown的Jekyll，这是最佳解决方案。 - Nick McCurdy
4这里展示的块属性是使用kramdown的一个不错选项。这里的语法有点错误，可能是@piratemurray遇到麻烦的原因。正确的应该是
{: height=36 width=36}；这将生成HTML属性，所以它不应该具有“px”后缀。或者，您可以使用CSS和{: style="height:36px; width:36px"}。 - Quantum71适用于jekyll！谢谢。我甚至不需要高度和宽度，只需要一个就足够了。
{:height="36px"} - Matthias1我必须进行一些小改动才能使其在Jekyll中正常工作。这个答案的输出HTML格式不正确，因为“width”和“height”属性包括“px”部分。对于我来说，我需要使用
{:height="36" width="36"}。 - Maximillian Laumeister截至今天，如果我将一个kramdown文件上传到GitHub Pages并让Jekyll将其转换为*.html，则上述代码对我有效。
height="36"中的双引号确实很重要。请参见此提交，第11行。 - Vojta F48
将
替换为<img src="https://image-url.type" width="200" height="200"/>。- prabhu
2
可以工作。但是使用HTML违背了使用比HTML更简单的标记语言的初衷。 - Martin
这并不适用于每个Markdown实现。你应该在回答中指定具体的Markdown包。所以我给你一个踩下去的 - us_david
30
有人可能会利用在几乎所有Markdown实现/渲染器中都可以设置的alt属性，结合基于属性值的CSS选择器来定义一整套不同的图片尺寸（以及其他属性）。
Markdown:
CSS：
img[alt="minipic"] {
max-width: 20px;
display: block;
}
- petermeissner
3
28这是对alt属性的误用，会影响可访问性。 - sbuck
3是的，这是一个 hack 但似乎仍然是在不同 Markdown 风格中可行的唯一方法。点赞为指出这一点（使用屏幕阅读器的人会遇到问题，对于那些不费心使用正确方式的人也会有问题）。 - petermeissner
23
如果您正在使用 kramdown，您可以这样做：
{:.foo}
然后将此添加到您的自定义 CSS中：
.foo {
text-align: center;
width: 100px;
}
- Zombo
1
3我建议不要仅在CSS中设置宽度。在图像和样式表加载完成之前，告诉浏览器图像元素的大小非常有用，这样它可以优化图像周围元素的布局而无需进行回流。 - Nick McCurdy
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
!是什么意思？ - buhtz[text](URL)和图片。 - VonC{width=x height=y}约定。 - VonC{width=x height=y}的约定。 - undefined