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

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

![drawing](drawing.jpg)

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


当前回答

你可以在kramdown中使用这个:

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

or

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

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

其他回答

如果更改初始标记对您来说不是一个选项,则此黑客可能会奏效:

newHtml = oldHtml.replace(/<img/g, '<img height="100"');

我使用它可以在发送电子邮件之前调整图像大小(因为Outlook忽略任何图像css样式)

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

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

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

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

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

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

您可以在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; }

你可以在kramdown中使用这个:

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

or

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

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