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

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

![drawing](drawing.jpg)

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


当前回答

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

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

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

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

上面的标记可能类似于:

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

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

其他回答

对于所有在R markdown/bookdown中工作的解决方案,上述解决方案不工作或需要略微调整:

工作

追加{width=50%}或{width=50%height=50%}![foo](foo.png){width=50%}![foo](foo.png){宽度=50%高度=50%}重要提示:宽度和高度之间没有逗号,即{width=50%,height=30%}不起作用!追加{height=“36px”width=“36px”}![foo](foo.png){height=“36px”width=“36px”}注意:带冒号的{:height=“36px”width=“36px”}(来自@sayth)似乎不适用于R markdown

不工作:

附加=宽度x高度在图形文件的URL之后调整图像大小(从@prosseek)两者都不=宽度x高度![foo](foo.png=100x20)nor=仅宽度![foo](foo.png=250x)工作

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

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

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

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

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

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

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

语法示例:

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

小猫的例子:

这一条对我有用,它不在一条线上,但我希望它对你有用。

<div>
<img src="attachment:image.png" width="500" height="300"/>
</div>

您可以在Markdown中使用一些HTML:

<img src="drawing.jpg" alt="drawing" width="200"/>

或通过样式属性(GitHub不支持)

<img src="drawing.jpg" alt="drawing" style="width:200px;"/>

或者您可以使用自定义CSS文件,如以下关于Markdown和图像对齐的回答所述

![drawing](drawing.jpg)

另一个文件中的CSS:

img[alt=drawing] { width: 200px; }