如何更改图片大小Markdown?

我刚开始使用Markdown。 我喜欢它,但有一件事情让我烦恼:如何使用Markdown更改图像的大小?

文档只给出了一个图像的以下build议:

![drawing](drawing.jpg) 

如果可能的话,我也希望这幅画也是以中心为中心的。

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

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

你可以跳过HEIGHT

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

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

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

或者你可以使用一个自定义的CSS文件,在这个答案中描述的降价和图像alignment

 ![drawing](drawing.jpg) 

另一个文件中的CSS:

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

这里接受的答案是没有任何Markdown编辑器可用在我使用的应用程序像Ghost,Stackedit.io甚至在堆栈溢出编辑器。 我在StackEdit.io问题跟踪器中发现了一个解决方法。

解决scheme是直接使用HTML语法,并且完美地工作:

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

我希望这有帮助。

只要使用:

 <img src="Assets/icon.png" width="200"> 

代替:

 ![](Assets/icon.png) 

也许这最近已经改变了,但Kramdown文档显示了一个简单的解决scheme。

从文档

 Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}. And here is a referenced ![smile] [smile]: smile.png {: height="36px" width="36px"} 

在Jekyll和Kramdown的github上工作。

如果你正在为PanDoc编写MarkDown,你可以这样做:

 ![drawing](drawing.jpg){ width=50% } 

这增加了style="width: 50%;" 到HTML <img>标签,或[width=0.5\textwidth]到LaTeX中的\includegraphics

来源: http : //pandoc.org/MANUAL.html#extension-link_attributes

人们可以借鉴alt属性 ,几乎所有的Markdown实现/渲染器都可以根据属性值设置CSSselect器 。 好处是人们可以很容易地定义一整套不同的图片尺寸(和其他属性)。

降价:

 ![minipic](mypic.jpg) 

CSS:

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

如果你正在使用kramdown ,你可以这样做:

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

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

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

根据Tiemes的回答,如果您使用的是CSS 3 ,则可以使用子stringselect器 :

这个select器将匹配任何图像与以'-fullwidth'结尾的alt标签:

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

那么你仍然可以使用alt标签来达到预期的目的来描述图片。

对于上述的减价可能是这样的:

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

我一直在Ghost markdown中使用它,它一直在运行良好。

我编写了简单的标签parsing器在Jekyll中使用自定义大小的img标签。

https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079

 {% img /path/to/img.png 100x200 %} 

您可以将文件添加到_plugins文件夹。

你也可以用kramdown来使用这个:

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

要么

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

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

我知道这个答案是有点特定的,但它可能帮助其他需要帮助的人。

由于许多照片是使用Imgur服务上传的,因此您可以使用此处详细介绍的API来更改照片的大小。

当在GitHub的问题评论中上传照片时,它将通过Imgur添加,如果照片非常大,这将有很大的帮助。

基本上,而不是http://i.imgur.com/12345.jpg ,你会把http://i.imgur.com/12345m.jpg中等大小的图像。;

对于R-Markdown,上述两种解决scheme都不适合我,所以我转而使用常规的LaTeX语法,这很好。

 \begin{figure} \includegraphics[width=300pt, height = 125 pt]{drawing.jpg} \end{figure} 

然后,您可以使用例如\begin{center}语句来对图像进行居中。

有添加类和CSS样式的方式

![pic][logo]{.classname}

然后在下面写下链接和CSS

 [logo]: (picurl) <style type="text/css"> .classname{ width: 200px; } </style> 

参考这里

我来这里寻找答案。 这里有一些很棒的build议。 而黄金资讯指出,markdown完全支持HTMl!

一个好的干净的解决scheme总是确保使用纯粹的html语法。 随着标签。

但我试图仍然坚持使用markdown语法,所以我试着将其包装在一个标签中,并在div标签内添加了我想要的任何属性。 它的工作原理!

 <div style="width:50%">![Chilling](w3images/fjords.jpg)</div> 

所以这种方式支持外部图像!

只是以为我会把它放在那里,因为它不是在任何答案。 🙂

当使用Flask (我正在使用它与平面页面)…我发现明确启用(不是默认的某种原因)'attr_list'在扩展内的调用降价做的伎俩 – 然后可以使用的属性(对于访问CSS class =“我的类”也是非常有用的,例如…)。

FLATPAGES_HTML_RENDERER = prerender_jinja

和function:

 def prerender_jinja(text): prerendered_body = render_template_string(Markup(text)) pygmented_body = markdown.markdown(prerendered_body, extensions=['codehilite', 'fenced_code', 'tables', 'attr_list']) return pygmented_body 

然后在Markdown中:

 ![image](https://octodex.github.comhttp://img.dovov.comyaktocat.png "This is a tooltip"){: width=200px}