如果你是使用Kramdown，你可以这样做：

{:.foo}![drawing](drawing.jpg)

然后将其添加到您的自定义CSS：

.foo {text-align: center;width: 100px;}

你可以在Markdown中使用一些超文本标记语言：

<img src="drawing.jpg" alt="drawing" width="200"/>

或通过style属性（GitHub不支持）

<img src="drawing.jpg" alt="drawing" style="width:200px;"/>

或者您可以使用自定义CSS文件，如标记和图像对齐上的答案所述

![drawing](drawing.jpg)

另一个文件中的CSS：

img[alt=drawing] { width: 200px; }

你也可以在Kramdown中使用这个：

markdown![drawing](drawing.jpg){:.some-css-class style="width: 200px"}

或

markdown![drawing](drawing.jpg){:.some-css-class width="200"}

通过这种方式，您可以直接向最后一个html元素添加任意属性。要添加类，有一个快捷方式.class.secondclass。

使用某些Markdown实现（包括某和标记为2（仅限macOS）），您可以在图形文件的URL后附加=WIDTHxHEIGHT以调整图像大小。不要忘记=之前的空格。

![](./pic/pic1_50.png =100x20)

你可以跳过高处

![](./pic/pic1s.png =250x)

和宽度

![](./pic/pic1s.png =x250)

这里接受的答案是不适用于我迄今为止使用的应用程序中的任何Markdown编辑器，如Ghost、Stackedit.io甚至StackOverflow编辑器。我找到了一个解决方法在StackEdit.io问题跟踪器中。

解决方案是直接使用超文本标记语言语法，它完美地工作：

<img src="http://....jpg" width="200" height="200" />

我编写了简单的标记解析器脚本，以便在Jekyll中使用自定义大小的img标记。

https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079

{% img /path/to/img.png 100x200 %}

您可以将文件添加到_plugins文件夹。

可以借鉴几乎所有基于属性值的Markdown实现/渲染与CSS选择器一起中可以设置的#0属性。优点是可以轻松定义一整套不同的图片大小（和进一步的属性）。

降价：

![minipic](mypic.jpg)

css：

img[alt="minipic"] {max-width:  20px;display: block;}

也许这最近有所改变，但Kramdown文档显示了一个简单的解决方案。

从文档里

Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}.
And here is a referenced ![smile]
[smile]: smile.png{: height="36px" width="36px"}

在github上与Jekyll和Kramdown一起工作。

只需使用：

<img src="Assets/icon.png" width="200">

而不是：

![](Assets/icon.png)

我知道这个答案有点具体，但它可能会帮助有需要的人。

由于许多照片都是使用Imgur服务上传的，因此您可以使用这里详细的API更改照片的大小。

在GitHub问题评论中上传照片时，会通过Imgur添加，所以如果照片很大，这会有很大帮助。

基本上，而不是http://i.imgur.com/12345.jpg，你会把http://i.imgur.com/12345m.jpg用于中等大小的图像。

基于Tiemes的回答，如果你使用CSS3，你可以使用子串选择器：

此选择器将匹配任何带有以'-fullwide'结尾的alt标记的图像：

img[alt$="-fullwidth"]{width:  100%;display: block;}

然后，您仍然可以使用其预期目的的alt标记来描述图像。

上面的Markdown可能是这样的：

![Picture of the Beach -fullwidth](beach.jpg)

我一直在Ghost Markdown中使用它，而且效果很好。

当使用烧瓶时（我将它用于平面页面）……我发现显式启用（由于某种原因不是默认的）“attr_list”在调用mark down的扩展中确实起到了作用——然后可以使用属性（也非常有用访问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中：

![image](https://octodex.github.com/images/yaktocat.png "This is a tooltip"){: width=200px}

对于R-Markdown，上述两种解决方案都不适合我，所以我转向常规的LaTeX语法，它运行得很好。

\begin{figure}\includegraphics[width=300pt, height = 125 pt]{drawing.jpg}\end{figure}

然后您可以使用\begin{center}语句将图像居中。

如果你正在为PanDoc编写MarkDown，你可以这样做：

![drawing](drawing.jpg){ width=50% }

这将style="width: 50%;"添加到超文本标记语言<img>标记，或在LaTeX中将[width=0.5\textwidth]添加到\includegraphics。

来源：http://pandoc.org/MANUAL.html#extension-link_attributes

有添加类和css样式的方法

![pic][logo]{.classname}

然后在下面写下链接和css

[logo]: (picurl)
<style type="text/css">.classname{width: 200px;}</style>

参考这里

我来这里寻找答案。这里有一些很棒的建议。而黄金信息指出Markdown完全支持HTMl！

一个好的干净的解决方案总是使用纯html语法。使用标签。

但我试图仍然坚持Markdown语法，所以我尝试将其包装在一个标签周围，并在div标签内添加我想要的图像属性。它起作用了！！

<div style="width:50%">![Chilling](https://www.w3schools.com/w3images/fjords.jpg)</div>

所以这种方式支持外部图像！

只是想我会把这个放在那里，因为它不在任何答案中。：）

向源URL添加相对维度将在大多数Markdown渲染器中呈现。

我们在Corilla中实现了这一点，因为我认为该模式遵循了对现有工作流的期望，而不会迫使用户依赖基本的超文本标记语言。如果你最喜欢的工具没有遵循类似的模式，那么值得提出功能请求。

语法示例：

![a-kitten.jpg](//corilla.com/a-kitten-2xU3C2.jpg =200x200)

小猫的例子：

如果更改初始降价不是您的选择，则此黑客可能会起作用：

newHtml = oldHtml.replace(/<img/g, '<img height="100"');

我使用它是为了能够在将图像发送到电子邮件之前调整图像大小（因为Outlook忽略任何图像css样式）

对于那些对rmarkdown和knitr解决方案感兴趣的人。有一些方法可以在不使用html的情况下调整.rmd文件中的图像大小：

您可以通过添加{width=123px}来简单地指定图像的宽度。不要在括号之间引入空格：

![image description]('your-image.png'){width=250px}

另一种选择是使用knitr::include_graphics：

```{r, fig.cap="image description", out.width = '50%'}knitr::include_graphics('your-image.png')```

对于IntelliJ IDEA用户，请参阅Markdown导航器插件。

预览渲染图像，徽章，超文本标记语言等。

调整Jupyter Notebook中Markdown图像附件的大小

我正在使用#0和jupyter笔记本。

如果您通过将图像插入Markdown来附加图像，如下所示：

![Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png](attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png)

这些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>

希望这有帮助！

供将来参考：

乔普林的Markdown实现允许通过以下方式控制导入图像的大小：

<img src=":/7653a812439451eb1803236687a70ca" width="450"/>

此功能被要求这里和承诺由Laurent这已经实现。

我花了一段时间才弄清楚乔普林的具体答案。

将![title](image-url.type)替换为<img src="https://image-url.type" width="200" height="200"/>

对于所有寻找在r降价/降价中工作的解决方案的人来说，这些以前的解决方案可以/不可以工作，或者需要稍微调整：

工作

• 追加{ width=50% }或{ width=50% height=50% }

  • ![foo](foo.png){ width=50% }

  • ![foo](foo.png){ width=50% height=50% }

  • 重要：宽度和高度之间没有逗号-即{ width=50%, height=30% }不起作用！

• 添加{ height="36px" width="36px" }

  • ![foo](foo.png){ height="36px" width="36px" }
  • 备注：{:height="36px" width="36px"}冒号，来自@sayth，似乎不适用于R Markdown

不工作：

• 添加=WIDTHxHEIGHT
  • 在图形文件的URL之后调整图像大小（如来自@pl…
  • =WIDTHxHEIGHT![foo](foo.png =100x20)和=WIDTH都不起作用，只有![foo](foo.png =250x)起作用

结合两个答案，我想出了一个解决方案，可能看起来不那么漂亮，
#36825；行！

它创建一个具有特定大小的缩略图，可以单击该缩略图以将您带到最大分辨率图像。

[<img src="image.png" width="250"/>](image.png)

这是一个例子！我在Visual Code和Github上测试了它。

由于反馈，我们知道这也适用于：

• GitLab
• jupyter笔记本

提姆的答案最适合大多数情况。

在我的例子中，我使用pandoc将Markdown转换为latex。超文本标记语言标签在这里不起作用。

我的解决方案是重新实现\includegraphics

\let\maxincludegraphics\includegraphics\renewcommand{\includegraphics}[1]{\maxincludegraphics[max width=\textwidth]{#1}}

这类似于转换为超文本标记语言后使用CSS。

这个对我有用，它不在一条线上，但我希望它对你有用。

<div><img src="attachment:image.png" width="500" height="300"/></div>

如果您在Gihub风格的Markdown中使用引用样式图像：

Here is an image of tree:![alt text][tree]{height=400px width=500px}

[//]: # (Image References)[tree]: ./images/tree.png "This is a tree"

如果我们只是像这样使用普通的超文本标记语言图像标记，它就可以工作，如果你使用引导程序进行样式化。我在用Jekyll制作的网站中使用这个。

<img class="img-fluid" src="./img/face.jpg" alt="img-verification">

如果我们按照这个例子添加引导类，它就可以正常工作。

上面所说的纯粹确实在我的GithubReadme.md文档上工作。

然而，我真正的问题是，图像在一个表格单元里，只是压缩旁边单元格中的文本。因此，另一种方法是在Markdown表中设置列宽度，但解决方案似乎不足以满足我早上的马克当尼什。

最后我解决了这两个问题，简单地强迫旁边的文本单元格与尽可能多的" "我需要。

我希望这有帮助。再见，谢谢大家。

对于那些在Google合作平台上使用Markdown的用户，无需将图像上传到会话存储文件夹，或链接到Google Drive上。如果图像有URL，并且可以包含在Jupyter笔记本上，其大小更改如下：

<img src="https://image.png" width="500" height="500" />

如果每个md文件中都有一个图像，控制图像大小的一种方便方法是：

添加css样式如下：

## Who Invented JSON?`Douglas Crockford`
Douglas Crockford originally specified the JSON format in the early 2000s.![Douglas Crockford](img/Douglas_Crockford.jpg)
<style type="text/css">img {width: 250px;}</style>

输出将是：

如果你在每个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/>![Result1](img/res-img-1.png) <br/>
![Result2](img/res-img-2.png) <br/>
![Result3](img/res-img-3.png) 

向下兼容MD：

![<alt>](<imguri>#<w>x<h> "<title>")

其中w， h定义了边框以适应方面，例如在Flutter包https://pub.dev/packages/flutter_markdown中

代码：https://github.com/flutter/packages/blob/9e8f5227ac14026c419f481ed1dfcb7b53961475/packages/flutter_markdown/lib/src/builder.dart#L473

重新考虑HTML解决方法，因为人们可能会使用本机/非html组件/应用程序来显示降价。

这会管用的

<style>img{width: 50%;}#foo {color: red;}</style>
<p id="foo">foo</p>
<p style="color: blue">bar</p>

如果您使用的是Markdown it，首先需要启用超文本标记语言渲染：

const md = require("markdown-it")({html: true,});

然后您可以在.md文件中使用：

<img src="" alt="drawing" width="100%" height="200"/>

将图像URL放在下面的标签中。记得相应地更改宽度和高度。像这样

<img src="IMAGE_URL_HERE"  width="300" height="300">

您可以指定宽度而不指定高度属性，反之亦然。

或者，您可以使用如下百分比值更改图像大小：

<img src="IMAGE_URL_HERE"  width=50% height=50%>

我只是在一些图像编辑器中编辑图像-水平放大图像，因此当渲染器将大小调整为页面宽度时，它会垂直变小。

所以，只需添加一些透明的左右边距。