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

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

![drawing](drawing.jpg)

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


当前回答

结合两个答案,我得出了一个解决方案,看起来可能没那么漂亮,但它奏效了!

它创建了一个具有特定大小的缩略图,可以单击该缩略图以获得最高分辨率的图像。

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

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

由于反馈,我们知道这也适用于:

GitLab公司Jupyter笔记本

其他回答

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

如果您正在为PanDoc编写MarkDown,可以执行以下操作:

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

这会将style=“width:50%;”添加到HTML<img>标记中,或将[width=0.5\textwidth]添加到LaTeX中的\includegraphics中。

资料来源:http://pandoc.org/MANUAL.html#extension-链接属性

当使用Flask时(我将其用于平面页面)。。。我发现,在markdown调用中的扩展中显式地启用(由于某种原因,默认情况下不是这样)“attr_list”可以实现这一点,然后可以使用属性(对于访问CSS也非常有用-例如,class=“my class”…)。

FLATPAGES_HML_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}

如果每个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标记,我们可以有:

//在css或样式标签中:img[alt=“结果1”]{宽度:100px;}img[alt=“结果2”]{宽度:200px;}img[alt=“结果3”]{宽度:400px;}//尝试使用以下方法之一在文档中插入图像:<br/><img src=“https://i.stack.imgur.com/xUb54.png“alt=”结果1“><br/><img src=“https://i.stack.imgur.com/xUb54.png“alt=”结果2“><br/><img src=“https://i.stack.imgur.com/xUb54.png“alt=”结果3“><br/><br/>在md中:<br/>![结果1](img/res-img-1.png)<br/>![结果2](img/res-img-2.png)<br/>![结果3](img/res-img-3.png)

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

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

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

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