在Markdown中更改图片大小

在 Tieme 的回答基础上，如果你使用的是 CSS 3，你可以使用一个子字符串选择器：

这个选择器将匹配任何带有 alt 标签以“-fullwidth”结尾的图片：

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

那么您仍然可以使用alt标签来描述图片的预期用途。

上述内容的Markdown可能类似于：

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

我一直在Ghost markdown中使用这个，效果很不错。

如果您在GitHub Flavored Markdown中使用引用样式的图片：

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


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

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

另一个选项是使用knitr::include_graphics：

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

如果每个markdown文件中只有一张图片，控制图片大小的一种便利方式是：

添加以下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>

输出结果如下：

如果您在每个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://istack.dev59.com/xUb54.webp" alt="Result1"> <br/>
<img src="https://istack.dev59.com/xUb54.webp" alt="Result2"> <br/>
<img src="https://istack.dev59.com/xUb54.webp" 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) 

对我来说，这个方法可行，虽然不是一行，但我希望它对你有用。

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

我来到这里是为了寻找答案。这里有一些很棒的建议和黄金信息，指出markdown完全支持HTML！

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

但是我仍然想坚持使用markdown语法，所以我尝试将其包装在标签中，并在div标签内添加任何我想要的图像属性。它有效！！

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

这样就支持外部图片了！

只是想说一下，因为它没有在任何答案中提到。 :)

对于所有寻找在 R markdown/ bookdown 中有效解决方案的人，以下是之前的一些解决方案是否有效或需要稍作修改：

有效

• 添加{ 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" }
  • 注意：加上冒号的{:height="36px" width="36px"}，来自 @sayth 的建议，似乎在 R markdown 中无效

无效：

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

Obsidian有其自己的语法：

![Engelbart|100x145](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)

来自：Obsidian帮助 - 基本格式语法

使用 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/12345m.jpg代替http://i.imgur.com/12345.jpg来放置中等大小的图像。