我刚开始使用Markdown。我喜欢它，但是有一件事困扰着我：如何使用Markdown更改图像的大小？

该文档仅对图像提供以下建议：

![drawing](drawing.jpg)

如果可能，我希望图片也居中。我要求一般的Markdown，而不仅仅是GitHub如何做到这一点。

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

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

您可以跳过高度

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

您可以在Markdown中使用一些HTML：

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

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

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

或者，您可以按照本答案中关于Markdown和图像对齐的说明使用自定义CSS文件

![drawing](drawing.jpg)

CSS在另一个文件中：

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

到目前为止，这里接受的答案与我以前使用过的应用程序（例如Ghost，Stackedit.io或什至Stack Overflow编辑器）中可用的Markdown编辑器不兼容。我在StackEdit.io问题跟踪器中找到了一种解决方法。

解决方案是直接使用HTML语法，并且效果很好：

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

我希望这有帮助。

只需使用：

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

代替：

![](Assets/icon.png)

如果要为PanDoc编写MarkDown，则可以执行以下操作：

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

这增加了style="width: 50%;"对HTML <img>标签，或[width=0.5\textwidth]以\includegraphics在LaTeX的。

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

也许这最近有所改变，但是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"}

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

人们可能会利用几乎可以在所有Markdown实现/渲染中设置的alt属性以及基于属性值的CSS选择器。优点是可以轻松定义一整套不同的图片尺寸（和其他属性）。

降价：

![minipic](mypic.jpg)

CSS：

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

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

如果使用kramdown，则可以执行以下操作：

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

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

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

以Tiemes答案为基础，如果您使用CSS 3，则可以使用子字符串选择器：

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

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

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

上面的Markdown可能类似于：

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

我一直在Ghost markdown中使用它，并且运行良好。

结合两个答案，我得出了一个解决方案，它看起来可能并不那么漂亮，
但它有效！

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

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

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

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

一个好的干净解决方案始终是确保使用纯html语法。带标签。

但是我仍然尝试坚持markdown语法，因此我尝试将其包装在标签周围，并在div标签内添加了图像所需的任何属性。而且有效！！

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

因此，这种方式支持外部图像！

只是以为我会把它放在那里，因为它没有任何答案。:)

对于那些在intereseted rmarkdown和knitr溶液。有一些.rmd无需使用以下即可调整文件中图像大小的方法html：

您只需添加即可为图像指定宽度{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')
```

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

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

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

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

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

由于使用Imgur服务上传了许多照片，因此您可以使用此处详述的API来更改照片的大小。

在GitHub问题评论中上传照片时，它将通过Imgur添加，因此如果照片很大，这将很有帮助。

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

您也可以将其与kramdown一起使用：

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

要么

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

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

这对我有用，不是一行，但我希望对您有用。

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

对于R-Markdown，上述两种解决方案都不适合我，因此我转向了常规LaTeX语法，该语法很好用。

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

然后，您可以使用例如\begin{center}语句来居中图像。

有添加类和CSS样式的方法

![pic][logo]{.classname}

然后在下面写下链接和CSS

[logo]: (picurl)

<style type="text/css">
    .classname{
        width: 200px;
    }
</style>

这里参考

对于所有寻找适用于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后面以调整图像的大小（例如@prosseek）
  • 既不=WIDTHxHEIGHT ![foo](foo.png =100x20)也不是=WIDTH只有![foo](foo.png =250x)工作

向源URL添加相对尺寸将在大多数Markdown渲染器中渲染。

我们在Corilla中实现了这一点因为我认为该模式可以遵循现有工作流程的期望，而不会促使用户依赖基本HTML。如果您最喜欢的工具没有遵循类似的模式，则值得提出功能请求。

语法示例：

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

小猫的例子：

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

我正在使用jupyter_core-4.4.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>

希望这可以帮助！

备查：

Joplin的 Markdown实现允许以以下方式控制导入图像的大小：

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

请求此功能在这里和承诺由洛朗这个已经实施。

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

如果您使用的是Github 参考样式图片：

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


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

当使用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中：

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

对于IntelliJ IDEA用户，请参阅Markdown Navigator插件。

预览呈现图像，徽章，HTML等。

如果您不希望更改初始降价优惠，则可以使用此技巧：

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

我用它来调整图像的大小，然后再通过电子邮件发送它们（因为Outlook会忽略任何图像CSS样式）

在大多数情况下，Tieme的答案是最好的。

就我而言，我正在使用pandoc将Markdown转换为乳胶。HTML标记在这里不起作用。

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

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

类似于在转换为HTML后使用CSS。