在 Markdown 中更改图像大小答案

【问题标题】：Changing image size in Markdown在 Markdown 中更改图像大小
【发布时间】：2013-01-18 12:19:24
【问题描述】：

我刚开始使用 Markdown。我喜欢它，但有一件事困扰着我：如何使用 Markdown 更改图像的大小？

文档仅对图像给出以下建议：

![drawing](drawing.jpg)

如果可能的话，我希望图片也可以居中。我要的是一般的 Markdown，而不仅仅是 GitHub 是如何做到的。

【问题讨论】：

对于顶部图像（如 repo 徽标），我只是在导出到 PNG 之前在原始图像中制作“白色填充”。
您应该真正将已接受的答案修复为 HTML 答案，因为当前答案使用了无法广泛使用的非标准降价功能

标签： image markdown

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果每个 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>

输出如下： [![在此处输入图片描述][1]][1]

如果您在每个 md 页面中有更多图像，那么控制每个图像或每个自定义标签的便捷方法是在 css 中定义每个元素。对于这种情况，我们可以使用 img 标签：




//in css or within style tags:
    img[alt="Result1"] {
    width: 100px;
    }

    img[alt="Result2"] {
    width: 200px;
    }
    img[alt="Result3"] {
    width: 400px;
    }

// try in md one of the methods shown below to insert image in your document:
 <br/>
<img src="https://i.stack.imgur.com/xUb54.png" alt="Result1"> <br/>
<img src="https://i.stack.imgur.com/xUb54.png" alt="Result2"> <br/>
<img src="https://i.stack.imgur.com/xUb54.png" alt="Result3"> <br/>

<br/>

in md:<br/>
![Result1](img/res-img-1.png) <br/>

![Result2](img/res-img-2.png) <br/>

![Result3](img/res-img-3.png) 





  [1]: https://i.stack.imgur.com/xUb54.png

【讨论】：

【解决方案3】：

通过普通向后兼容的 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 组件/应用程序来显示降价。

【讨论】：

【解决方案4】：

这会起作用

<style>
img{width: 50%;}
#foo {color: red;}
</style>

<p id="foo">foo</p>

<p style="color: blue">bar</p>

【讨论】：