在Markdown中更改图像大小

本文翻译自：Changing image size in Markdown

I just got started with Markdown. 我刚开始使用Markdown。 I love it, but there is one thing bugging me: How can I change the size of an image using Markdown? 我喜欢它，但是有件事困扰着我：如何使用Markdown更改图像的大小？

The documentation only gives the following suggestion for an image: 该文档仅对图像提供以下建议：

![drawing](drawing.jpg)

If it is possible I would like the picture to also be centered. 如果可能，我希望图片也居中。 I am asking for general Markdown, not just how GitHub does it. 我要的是一般的Markdown，而不仅仅是GitHub的工作方式。

---

#1楼

参考：https://stackoom.com/question/zZsH/在Markdown中更改图像大小

---

#2楼

If you are using kramdown , you can do this: 如果使用kramdown ，则可以执行以下操作：

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

Then add this to your Custom CSS : 然后将其添加到您的自定义CSS中 ：

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

---

#3楼

You could just use some HTML in your Markdown: 您可以在Markdown中使用一些HTML：

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

Or via style attribute ( not supported by GitHub ) 或通过style属性（ GitHub不支持 ）

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

Or you could use a custom CSS file as described in this answer on Markdown and image alignment 或者，您可以按照本答案中关于Markdown和图像对齐的说明使用自定义CSS文件

![drawing](drawing.jpg)

CSS in another file: CSS在另一个文件中：

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

---

#4楼

You could use this one as well with kramdown: 您也可以将其与kramdown一起使用：

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

or 要么

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

This way you can directly add arbitrary attributes to the last html element. 这样，您可以将任意属性直接添加到最后一个html元素。 To add classes there is a shortcut .class.secondclass . 要添加类，有一个快捷方式.class.secondclass 。

---

#5楼

With certain Markdown implementations (including Mou and Marked 2 (only macOS)) you can append =WIDTHxHEIGHT after the URL of the graphic file to resize the image. 使用某些Markdown实现（包括Mou和Marked 2 （仅macOS）），您可以在图形文件的URL后面附加=WIDTHxHEIGHT以调整图像的大小。 Do not forget the space before the = . 不要忘记=之前的空格。

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

You can skip the HEIGHT 您可以跳过高度

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

---

#6楼

The accepted answer here isn't working with any Markdown editor available in the apps I have used till date like Ghost, Stackedit.io or even in the Stack Overflow editor. 到目前为止，这里接受的答案不适用于我迄今为止使用过的应用程序（例如Ghost，Stackedit.io或什至是Stack Overflow编辑器）中可用的Markdown编辑器。 I found a workaround here in the StackEdit.io issue tracker . 我在StackEdit.io问题跟踪器中找到了一种解决方法。

The solution is to directly use HTML syntax, and it works perfectly: 解决方案是直接使用HTML语法，并且效果很好：

<img src="http://....jpg" width="200" height="200" />

I hope this helps. 我希望这有帮助。