我刚开始接触Markdown。我喜欢它,但有一件事困扰着我:如何使用Markdown更改图像的大小?

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

![drawing](drawing.jpg)

如果可能的话,我希望图片也居中。我问的是Markdown将军,而不仅仅是GitHub是如何做到的。


当前回答

将相对维度添加到源URL将在大多数Markdown渲染器中进行渲染。

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

语法示例:

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

小猫的例子:

其他回答

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

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

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

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

将相对维度添加到源URL将在大多数Markdown渲染器中进行渲染。

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

语法示例:

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

小猫的例子:

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

这会奏效的

<style>
img{width: 50%;}
#foo {color: red;}
</style>

<p id="foo">foo</p>

<p style="color: blue">bar</p>

如果使用markdown,首先需要启用HTML渲染:

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

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

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