在Markdown中更改图像大小

Question

我刚刚开始使用Markdown.我喜欢它,但有一件事困扰着我:如何使用Markdown改变图像的大小？

该文档仅为图像提供以下建议:

![drawing](drawing.jpg)

如果可能的话,我希望图片也能居中.我要求一般降价,而不仅仅是github如何做到这一点.

Answer 1

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

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

或者通过style属性(GitHub不支持)

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

或者您可以使用自定义CSS文件,如本答案中关于Markdown和图像对齐所述

![drawing](drawing.jpg)

另一个文件中的CSS:

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

Answer 2

对于某些降价实现(包括某和标记2(仅限Mac系统)),您可以添加=WIDTHxHEIGHT图形文件的URL后,调整图像大小.不要忘记之前的空间=.

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

你可以跳过高度

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

Answer 3

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

解决方案是直接使用HTML语法,它完美地工作:

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

我希望这有帮助.

Answer 4

只需使用:

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

代替:

![](Assets/icon.png)

Answer 5

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

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

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

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

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

• GitLab
• Jupyter 笔记本

Answer 6

也许这最近发生了变化,但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上运行.

Answer 7

如果您正在为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

Answer 8

在一个可能借鉴alt的属性,可以在几乎所有降价的实现设置/ renderes 与CSS选择器一起根据属性值.优点是可以容易地定义一组不同的图片尺寸(以及其他属性).

降价:

![minipic](mypic.jpg)

CSS:

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

Answer 9

如果您在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"

Answer 10

如果每个 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 标签，我们可以有：

## 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>

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

Answer 11

如果您使用kramdown,则可以执行以下操作:

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

然后将其添加到自定义CSS:

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

Answer 12

这不是一个通用的解决方案，但如果您使用Obsidian，它有自己的语法：

![Engelbart|100x145](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)

或者，使用问题中的示例：

![drawing|200x100](drawing.jpg)

来自：基本格式化语法 - Obsidian 帮助

Answer 13

这个对我有用，它不是在一行中，但我希望它对你有用。

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

Answer 14

在Tiemes的基础上回答,如果你使用的是CSS 3,你可以使用子串选择器:

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

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

然后,您仍然可以将alt标记用于描述图像的预期目的.

上面的Markdown可能是这样的:

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

我一直在Ghost降价中使用它,它一直运行良好.

Answer 15

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

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

请注意，仅输入width而height完全排除可以使图像适应小屏幕（即手机）。

Answer 16

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

一个好的干净解决方案总是与纯HTML语法一起使用.随着标签.

但我仍然试图坚持降价语法,所以我尝试将其包裹在标签周围,并为div标签内的图像添加了我想要的任何属性.它的工作原理!!

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

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

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

Answer 17

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

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

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

您可以将文件添加到该_plugins文件夹.

Answer 18

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

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

在GitHub发布评论中上传照片时,它将通过Imgur添加,因此如果照片非常大,这将有很大帮助.

基本上,您可以将http://i.imgur.com/12345m.jpg放入中等大小的图像中,而不是http://i.imgur.com/12345.jpg.

Answer 19

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

在职的

• 追加{ 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)工作

Answer 20

您可以使用这个以及kramdown:

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

要么

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

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

Answer 21

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

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

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

Answer 22

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

Answer 23

有添加类和 css 样式的方法

![pic][logo]{.classname}

然后在下面写下链接和css

[logo]: (picurl)

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

参考这里

Answer 24

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

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

语法示例：

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

小猫的例子：

Answer 25

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

Answer 26

在 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)

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

希望这可以帮助！

Answer 27

备查：

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

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

此功能是在此处请求的，并且正如Laurent所承诺的那样已实现。

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

Answer 28

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

Answer 29

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

Answer 30

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

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

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

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

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