这会奏效的

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

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

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

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

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

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

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

对于R-Markdown，以上两种解决方案都不适用于我，所以我转向了常规的LaTeX语法，这很好。

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

然后，可以使用例如\ begin｛center｝语句将图像居中。

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

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

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

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