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

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

![drawing](drawing.jpg)

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


当前回答

通过纯向后兼容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实现(包括Mou和Marked 2(仅限macOS)),您可以在图形文件的URL后添加=WIDTHxHEIGHT以调整图像大小。不要忘记=前面的空格。

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

您可以跳过高度

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

和宽度

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

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

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

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

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

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

你可以在kramdown中使用这个:

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

or

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

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

在Tiemes答案的基础上,如果您使用CSS 3,可以使用子字符串选择器:

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

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

然后,您仍然可以使用alt标记来描述图像。

上面的标记可能类似于:

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

我在Ghost markdown中使用过这个,而且效果很好。

通过纯向后兼容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组件/应用程序来显示标记。