在降价更改图像大小(Changing image size in Markdown)

我刚刚开始降价。 我喜欢它，但有一件事缠着我：我怎样才能改变使用降价图像的大小？

该文档仅给出了一个形象提出以下建议：

![drawing](drawing.jpg)

如果可能的话，我想也居中画面。 我要求一般的降价，GitHub的不只是如何做的。

Answer 1:

与某些降价实现（包括牟和标记2 （仅MACOS））可以追加=WIDTHxHEIGHT的图形文件的URL后，调整图像的大小。 不要忘了之前的空间= 。

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

你可以跳过的高度

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

Answer 2:

你可以只使用一些HTML在降价：

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

或者通过style属性（ 不支持的GitHub）

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

或者，正如在这个答案描述你可以使用自定义的CSS文件降价和图像对齐

![drawing](drawing.jpg)

CSS在另一个文件：

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

Answer 3:

这里的接受的答案是不是与我用，直到日期像鬼，Stackedit.io甚至在堆栈溢出编辑器应用程序提供的任何降价的编辑工作。 我发现了一个解决方法在StackEdit.io问题跟踪这里 。

解决的办法是直接使用HTML语法，它完美的作品：

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

我希望这有帮助。

Answer 4:

只需使用：

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

代替：

![](Assets/icon.png)

Answer 5:

也许这最近更改，但Kramdown文档展示一个简单的解决方案。

从文档

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

And here is a referenced ![smile]

[smile]: smile.png
{: height="36px" width="36px"}

工程与哲基尔和Kramdown github上。

Answer 6:

如果您是PanDoc写降价，你可以这样做：

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

这增加了style="width: 50%;" 到HTML <img>标记，或[width=0.5\textwidth]到\includegraphics在胶乳。

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

Answer 7:

对有人可能会得出alt ，可以在几乎所有的降价实现中设置属性 / 基于属性值CSS选择器一起 renderes。 的优点在于，人们可以很容易地定义一整套不同的画面尺寸（以及其它属性）的。

降价：

![minipic](mypic.jpg)

CSS：

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

Answer 8:

如果您在使用kramdown ，你可以这样做：

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

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

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

Answer 9:

从Tiemes答案建立在，如果你使用CSS 3 ，你可以使用一个子选择 ：

这个选择器将匹配以“-fullwidth”端的ALT标记任何图像：

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

那么你仍然可以使用ALT标记其预期目的来描述图像。

降价对于上述可能是这样的：

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

我在鬼降价一直在使用这一点，并已经运作良好。

Answer 10:

我来这里寻找答案。 这里有些建议真棒。 而黄金的信息指出，降价完全支持HTML！

一个好的干净的解决方案总是一起去肯定的纯HTML语法。 与标签。

但我想还是坚持降价语法，所以我想它包裹标签，并添加任何属性，我想为div标签内的图像。 和它的作品！

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

所以这样的外部图像的支持！

只是想我会把这个在那里，因为它是不以任何答案。 :)

Answer 11:

我脚本的简单标记解析器使用自定义尺寸img标签化身 。

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

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

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

Answer 12:

您可以使用此之一，也是与kramdown：

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

要么

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

这样你就可以随心所欲的属性直接添加到最后一个html元素。 要添加类有捷径.class.secondclass。

Answer 13:

我知道这个答案有点特殊，但它可能会帮助有需要的人。

由于许多照片都使用上传Imgur服务 ，您可以使用此详述的API来改变照片的大小。

当上传的GitHub的问题置评的照片，它会通过Imgur被添加，因此这将有很大的帮助，如果照片是非常大的。

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

Answer 14:

没有与添加类和CSS样式的方式

![pic][logo]{.classname}

然后记下以下链接和表格的CSS

[logo]: (picurl)

<style type="text/css">
    .classname{
        width: 200px;
    }
</style>

这里参考

Answer 15:

对于R-降价，无论是上述解决方案的工作对我来说，所以我把定期LaTeX的语法，它工作得很好。

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

然后你可以使用如\begin{center}声明居中图像。

Answer 16:

当使用瓶 （我使用它与平页）......我发现，使明确（是不是默认了某些原因）在调用降价内的分机“ATTR_LIST”的伎俩-然后可以使用的属性（非常有用也访问CSS - 类=“我的课”例如......）。

FLATPAGES_HTML_RENDERER = prerender_jinja

和功能：

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

然后在降价：

![image](https://octodex.github.com/images/yaktocat.png "This is a tooltip"){: width=200px}

Answer 17:

相对尺寸的给源URL添加将在大多数降价呈示被渲染。

我们实现了这个在Corilla因为我觉得模式是一个遵循现有的工作流程的预期，而无需按下用户要依靠基本的HTML。 如果你最喜欢的工具没有遵循类似的模式是值得提出功能要求。

语法的例子：

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

小猫的实施例：

Answer 18:

如果改变了最初的降价是不是一个选择，这个技巧可能工作：

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

我用这个来能够在一封电子邮件中向他们发送之前调整图像（如Outlook忽略任何图像CSS样式）

文章来源: Changing image size in Markdown