在 Markdown 中更改图像大小

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

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

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

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

或者，您可以使用 Markdown and image alignment 上此答案中所述的自定义 CSS 文件

![drawing](drawing.jpg)

另一个文件中的 CSS：

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

---

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

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

您可以跳过 HEIGHT

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

和宽度

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

---

这里接受的答案不适用于我迄今为止使用的应用程序中可用的任何 Markdown 编辑器，例如 Ghost、Stackedit.io 甚至在 StackOverflow 编辑器中。我找到了解决方法 here in the StackEdit.io issue tracker。

解决办法是直接使用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] 添加到 LaTeX 中的 \includegraphics。

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

---

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

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

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

https://i.stack.imgur.com/T3zhy.png

感谢您的反馈，我们知道这也适用于：

GitLab

Jupyter 笔记本

---

也许这最近发生了变化，但 Kramdown docs 显示了一个简单的解决方案。

从文档

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 一起工作。

---

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

---

人们可能会利用 alt 属性，该属性可以在几乎所有 Markdown 实现/渲染中与基于属性值的 CSS 选择器一起设置。优点是可以轻松定义一整套不同的图片大小（以及更多属性）。

降价：

![minipic](mypic.jpg)

CSS：

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

---

如果您是 using kramdown，您可以这样做：

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

然后将其添加到 your Custom CSS：

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

---

基于 Tiemes 的回答，如果您使用 CSS 3，则可以使用 substring selector：

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

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

然后您仍然可以使用其 intended purpose 的 alt 标记来描述图像。

上述的 Markdown 可能类似于：

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

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

---

如果您在 Gihub Flavored Markdown 中使用 reference style 图像：

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


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

---

对于那些对 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')
```

---

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

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

---

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

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

但我试图仍然坚持使用 markdown 语法，所以我尝试将它包装在一个标签周围，并在 div 标签内添加我想要的图像的任何属性。它有效！

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

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

只是想我会把它放在那里，因为它不在任何答案中。 :)

---

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

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

或者

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

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

---

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

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

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

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

---

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

由于使用 Imgur service 上传的照片很多，您可以使用 the API detailed here 更改照片的大小。

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

基本上，对于中等大小的图像，您可以使用 http://i.imgur.com/12345m.jpg 而不是 http://i.imgur.com/12345.jpg。

---

对于所有正在寻找在 R markdown/bookdown 中工作的解决方案的人，这些以前的解决方案可以/不工作或需要稍微调整：

在职的

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

{ 宽度=50% }

{ 宽度=50% 高度=50% }

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

附加 { height="36px" width="36px" } { height="36px" width="36px" } 注意：{:height="36px" width="36px"} with来自@sayth 的冒号似乎不适用于R markdown

{ height="36px" width="36px" }

注意：来自@sayth 的带有冒号的 {:height="36px" width="36px"} 似乎不适用于 R markdown

不工作：

在图形文件的 URL 之后附加 =WIDTHxHEIGHT 以调整图像大小（来自@prosseek） 既不 =WIDTHxHEIGHT  也不 =WIDTH only  工作

在图形文件的 URL 之后调整图像大小（来自@prosseek）

=WIDTHxHEIGHT  和 =WIDTH only  都不起作用

---

如果每个 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>

输出如下：[![在此处输入图像描述][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/>
![Result1](img/res-img-1.png) <br/>

![Result2](img/res-img-2.png) <br/>

![Result3](img/res-img-3.png) 

  

 



  [1]: https://i.stack.imgur.com/xUb54.png

---

对于在 Google Colaboratory 上使用 Markdown 的用户，无需将图像上传到会话存储文件夹或链接到 Google Drive。如果图像有 URL，并且可以包含在 Jupyter notebook 中，则其大小更改如下：

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

https://i.stack.imgur.com/6aZkC.png

---

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

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

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

---

使用 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}

---

有添加类和css样式的方法

![pic][logo]{.classname}

然后在下面写下链接和css

[logo]: (picurl)

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

Reference Here

---

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

我正在使用 jupyter_core-4.4.0 & jupyter 笔记本。

如果您通过将图像插入到降价中来附加图像，如下所示：

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

这些附件链接不起作用：

<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"/>

here 请求了此功能，并且作为 Laurent 的 promised，此功能已实现。

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

---

上面所说的纯粹 确实适用于我的 Github Readme.md 文档。

但是我真正的问题是，图像位于表格单元格内，只是压缩了旁边单元格中的文本。所以另一种方法是在 Markdown 表中设置列宽，但是对于我的早晨来说，这些解决方案似乎并没有足够的降价。

最后我通过简单地用尽可能多的“＆nbsp;”强制旁边的文本单元格解决了这两个问题根据我的需要。

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

---

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

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

语法示例：

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

小猫的例子：

https://i.stack.imgur.com/VVQET.jpg

---

通过简单的向后兼容 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 组件/应用程序来显示降价。

---

如果您无法选择更改初始降价，则此 hack 可能会起作用：

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

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

---