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

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

![drawing](drawing.jpg)

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


当前回答

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

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

您可以跳过高度

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

和宽度

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

其他回答

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

人们可以利用alt属性,该属性可以在几乎所有Markdown实现/渲染中设置,以及基于属性值的CSS选择器。优点是可以轻松定义一整套不同的图片大小(以及其他属性)。

标记:

![minipic](mypic.jpg)

CSS:

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

这会奏效的

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

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

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

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

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

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

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

如果我们只是像这样使用普通的HTML图像标记,那么它是有效的,如果您使用引导来进行样式设置。我在Jekyll制作的网站上使用这个。

<img class="img-fluid" src="./img/face.jpg" alt="img-verification">

如果我们按照这个例子添加引导类,它会很好地工作。