在Markdown中更改图像大小

时间：2013-02-03 18:42:06

标签： image markdown

我刚开始使用Markdown。我喜欢它，但有一件事让我烦恼：如何使用Markdown改变图像的大小？

该文档仅对图像提供以下建议：

![drawing](drawing.jpg)

如果有可能，我希望图片也能居中。我要求一般Markdown，而不仅仅是GitHub如何做到这一点。

35 个答案:

答案 0 :(得分：757)

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

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

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

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

或者您可以使用 Markdown and image alignment

中此答案中所述的自定义CSS文件 
![drawing](drawing.jpg)

CSS在另一个文件中：

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

答案 1 :(得分：386)

使用某些Markdown实现（包括Mou和Marked 2（仅限macOS）），您可以在图形文件的URL之后附加=WIDTHxHEIGHT以调整图像大小。不要忘记=之前的空格。

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

您可以跳过HEIGHT 

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

答案 2 :(得分：252)

此处接受的答案不适用于我迄今为止使用过的应用程序中的任何Markdown编辑器，如Ghost，Stackedit.io或甚至Stack Overflow编辑器。我找到了一个解决方法here in the StackEdit.io issue tracker。

解决方案是直接使用HTML语法，它完美运行：

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

我希望这会有所帮助。

答案 3 :(得分：100)

只需使用：

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

而不是：

![](Assets/icon.png)

答案 4 :(得分：52)

如果你正在为PanDoc编写MarkDown，你可以这样做：

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

这会在HTML style="width: 50%;"标记中添加<img>，或在LaTeX中添加[width=0.5\textwidth]到\includegraphics。

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

答案 5 :(得分：51)

也许这最近发生了变化，但Kramdown docs显示了一个简单的解决方案。

来自文档

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上工作。

答案 6 :(得分：33)

结合两个答案，我得出了一个解决方案，看起来可能不太漂亮，
但它有效！

它会创建一个具有特定大小的缩略图，可以单击该缩略图将您带到最大分辨率的图像。

[<img src="image.png" width="250"/>](image.png)

这是一个例子！我在Visual Code和Github上进行了测试。 Example markdown

答案 7 :(得分：19)

可以使用基于属性值的几乎所有Markdown实现/渲染和CSS-selectors 中设置的 alt属性。优点是可以容易地定义一组不同的图片尺寸（以及其他属性）。

<强>降价： 

![minipic](mypic.jpg)

<强> CSS： 

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

答案 8 :(得分：14)

如果你是using kramdown，你可以这样做：

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

然后将其添加到your Custom CSS：

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

答案 9 :(得分：11)

这对我有用，不是一行，但我希望对您有用。

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

答案 10 :(得分：10)

根据Tiemes回答，如果您使用https://developer.mozilla.org/en-US/docs/Web/CSS/Reference，则可以使用CSS 3：

此选择器会匹配任何带有以＆＃39; -fullwidth＆＃39;结尾的alt标记的图像：

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

然后，您仍然可以使用其substring selector的alt标记来描述图像。

上面的Markdown可能是这样的：

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

我一直在Ghost降价中使用它，它一直运作良好。

答案 11 :(得分：10)

如果您在 Gihub风味Markdown 中使用reference style张图片：

Here is an image of tree: 
![alt text][tree]{height=400px width=500px}


[//]: # (Image References)
[tree]: ./images/tree.png "This is a tree"

答案 12 :(得分：9)

我来这里寻找答案。这里有一些很棒的建议。黄金信息指出markdown完全支持HTMl！

一个好的干净解决方案总是与纯HTML语法一起使用。带标签。

但是我仍然坚持使用markdown语法，所以我尝试将其包装在标签周围，并为div标签内的图像添加了我想要的任何属性。它工作!! 

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

所以这样支持外部图像！

我想我会把它放在那里，因为它不在任何答案中。 ：）

答案 13 :(得分：8)

我编写了简单标记解析器，以便在Jekyll中使用自定义大小的img标记。

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

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

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

答案 14 :(得分：6)

我知道这个答案有点具体，但它可能会帮助其他有需要的人。

使用Imgur service上传的照片很多，您可以使用the API detailed here更改照片的大小。

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

基本上，您可以将http://i.imgur.com/12345.jpg放在中等大小的图像上，而不是http://i.imgur.com/12345m.jpg。

答案 15 :(得分：6)

你可以使用这个以及kramdown：

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

或

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

这样，您可以直接将任意属性添加到最后一个html元素。要添加类，有一个快捷键 .class.secondclass 。

答案 16 :(得分：6)

将![title](image-url.type)替换为<img src="https://image-url.type" width="200" height="200">

答案 17 :(得分：3)

有添加类和css样式的方法

![pic][logo]{.classname}

然后记下

下面的链接和css 
[logo]: (picurl)

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

Reference Here

答案 18 :(得分：2)

上述纯粹的 确实适用于我的 Github Readme.md 文档。

但是我真正的问题是，图像在表格单元格内，只是压缩旁边单元格中的文本。所以另一种方法是在 Markdown 表格中设置列宽，但对于我早上来说，这些解决方案似乎还不够markdownish。

最后，我通过简单地根据需要使用 "& nbsp;" 强制旁边的文本单元格解决了这两个问题。

我希望这会有所帮助。再见，谢谢大家。

答案 19 :(得分：2)

通过简单的向后兼容 MD：

![<alt>](<imguri>#<w>x<h> "<title>")

其中 w, h 定义了切面适合的边界框，例如 Flutter 包 https://pub.dev/packages/flutter_markdown

代码：https://github.com/flutter/packages/blob/9e8f5227ac14026c419f481ed1dfcb7b53961475/packages/flutter_markdown/lib/src/builder.dart#L473

重新考虑破坏兼容性的 html 解决方法，因为人们可能会使用本机/非 html 组件/应用程序来显示降价。

答案 20 :(得分：2)

在Jupyter Notebook中调整Markdown图片附件的大小

我正在使用jupyter_core-4.4.0和jupyter笔记本。

如果要通过将图像插入Markdown来附加图像，则如下所示：

![Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png](attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png)

这些attachment链接不起作用：

<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>

执行此操作。 确实有效。

只需添加div括号即可。 

<div>
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
</div>

希望这会有所帮助！

答案 21 :(得分：2)

适用于rmarkdown和knitr解决方案中感兴趣的人员。有一些方法可以在不使用.rmd的情况下调整html文件中图像的大小：

您只需添加{width=123px}，即可为图像指定宽度。不要在方括号之间引入空格：

![image description]('your-image.png'){width=250px}

另一种选择是使用knitr::include_graphics：

```{r, fig.cap="image description", out.width = '50%'}
knitr::include_graphics('your-image.png')
```

答案 22 :(得分：2)

在源网址中添加相对尺寸将在大多数Markdown渲染器中呈现。

我们在Corilla中实现了这一点，因为我认为该模式遵循现有工作流程的期望而不会促使用户依赖基本HTML。如果您最喜欢的工具不遵循类似的模式，则值得提出功能请求。

语法示例：

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

小猫的例子：

kitten

答案 23 :(得分：2)

对于R-Markdown，上述两种解决方案都不适用于我，所以我转向常规LaTeX语法，这很好用。

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

然后你可以使用例如\begin{center}语句使图像居中。

答案 24 :(得分：1)

供以后参考：

Joplin的Markdown实现允许通过以下方式控制导入图像的大小：

<img src=":/7653a812439451eb1803236687a70ca" width="450"/>

here请求了此功能，promised作为Laurent的要求已实现。


我花了一段时间才弄清楚乔普林的具体答案。

答案 25 :(得分：1)

如果我们只使用像这样的普通 HTML 图像标签，它就可以工作，如果您使用引导程序进行样式设置。我在用 Jekyll 制作的网站上使用它。

<img class="img-fluid" src="./img/face.jpg" alt="img-verification">

如果我们按照这个例子添加引导类，它工作正常。

答案 26 :(得分：1)

当使用Flask时（我正在使用平面页面）...我发现显式启用（由于某些原因，默认情况下不是默认情况下）'attr_list'在markdown调用中的扩展中做了诀窍 - 然后可以使用这些属性（非常有用的访问CSS - class =“my class”，例如...）。

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

然后在Markdown：

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

答案 27 :(得分：0)

https://chrome.google.com/webstore/detail/image-markdown-converter/pobecaeenppkojmgpmaceoefokfboaoj

此Google扩展程序会有所帮助。

答案 28 :(得分：0)

对于IntelliJ IDEA用户，请参阅Markdown Navigator插件。

预览呈现图像，徽章，HTML等

Android Studio Markdown Preview

答案 29 :(得分：0)

对于所有寻求在 R降价/预订中起作用的解决方案，以前的这些解决方案无效/不起作用或需要稍作调整：

工作

  • 追加{ width=50% }或{ width=50% height=50% }

    • ![foo](foo.png){ width=50% }

    • ![foo](foo.png){ width=50% height=50% }

    • 重要提示：宽度和高度之间没有逗号-即{ width=50%, height=30% } 不起作用 ！

  • 追加{ height="36px" width="36px" }

    • ![foo](foo.png){ height="36px" width="36px" }
    • 注意： {@ 1}中带有冒号的{:height="36px" width="36px"}似乎不适用于R降价

不起作用：

  • 追加=WIDTHxHEIGHT
    • 在图形文件的URL后面以调整图像的大小（例如@prosseek）
    • =WIDTHxHEIGHT ![foo](foo.png =100x20)和=WIDTH仅![foo](foo.png =250x)都不起作用

答案 30 :(得分：0)

在大多数情况下，Tieme的答案是最好的。

就我而言，我正在使用pandoc将降价促销转换为乳胶。 HTML标记在这里不起作用。

我的解决方案是重新实现\includegraphics 

\let\maxincludegraphics\includegraphics
\renewcommand{\includegraphics}[1]{\maxincludegraphics[max width=\textwidth]{#1}}

类似于在转换为HTML之后使用CSS。

答案 31 :(得分：0)

如果您不希望更改初始降价优惠，则此技巧可能会起作用：

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

我使用此功能可以在通过电子邮件发送图像之前调整图像大小（因为Outlook会忽略任何图像CSS样式）

答案 32 :(得分：0)

对于在 Google Colaboratory 上使用 Markdown 的用户，无需将图像上传到会话存储文件夹或链接到 Google Drive。如果图片有网址，并且可以包含在 Jupyter notebook 中，其大小更改如下：

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

enter image description here

答案 33 :(得分：0)

特别是如果每​​个 md 文件中有一个图像，控制图像大小的一种方便的方法是：

添加css样式如下：

## Who Invented JSON?
`Douglas Crockford`

Douglas Crockford originally specified the JSON format in the early 2000s.
![Douglas Crockford](img/Douglas_Crockford.jpg)

<style type="text/css">
    img {
        width: 250px;
    }
</style>

输出将如下所示： enter image description here

答案 34 :(得分：-1)

试试：

2021-01-23 10:06:35.734386-0600 MyAppName[28362:46367754] [DatePicker] UIDatePicker 0x7fbd66fc49f0 is being laid out below its minimum width of 280. This may not look like expected, especially with larger than normal font sizes.
2021-01-23 10:06:35.740477-0600 MyAppName[28362:46367754] [DatePicker] UIDatePicker 0x7fbd66fc49f0 is being laid out below its minimum width of 280. This may not look like expected, especially with larger than normal font sizes.
2021-01-23 10:06:35.752360-0600 MyAppName[28362:46367754] [DatePicker] UIDatePicker 0x7fbd66fc49f0 is being laid out below its minimum width of 280. This may not look like expected, especially with larger than normal font sizes.

示例：

![image|<SCALE(64x64)>](IMG_URL)
相关问题
最新问题