在Markdown中更改图片大小

技术背景

Markdown 是一种轻量级标记语言，被广泛用于编写文档、博客等。然而，Markdown 原生语法对图片大小的调整支持有限，为了满足不同场景下对图片大小的需求，我们需要借助一些额外的方法来实现图片大小的更改。

实现步骤

1. 使用 HTML 标签

在 Markdown 中可以直接使用 HTML 的 <img> 标签来设置图片大小。

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

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

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

2. 使用自定义 CSS 文件

在 Markdown 中引用图片，然后在 CSS 文件中针对特定的图片进行样式设置。
Markdown 部分：

![drawing](drawing.jpg)

CSS 部分：

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

3. 特定 Markdown 实现的语法

某些 Markdown 实现（如 Mou 和 Marked 2）支持在图片文件 URL 后追加 =WIDTHxHEIGHT 来调整图片大小。

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

可以省略高度或宽度：

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

4. Pandoc 的方法

如果使用 Pandoc 处理 Markdown，可以这样设置图片大小：

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

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"}

6. Obsidian 的语法

在 Obsidian 中可以使用以下语法调整图片大小：

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

7. R Markdown 和 knitr 的方法

可以通过添加 {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')

### 8. 使用 `<div>` 标签包裹
```html
<div style="width:50%">![Chilling](https://www.w3schools.com/w3images/fjords.jpg)</div>

核心代码

HTML 标签设置图片大小

<img src="your-image.jpg" width="200" height="200" />

CSS 结合 Markdown 调整图片大小

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

Obsidian 图片大小调整

![drawing|200x100](drawing.jpg)

最佳实践

• 跨平台兼容性：如果需要在多个平台和 Markdown 解析器中使用，建议优先使用 HTML 标签 <img> 来设置图片大小，因为 HTML 是通用的，兼容性较好。
• 代码简洁性：如果仅在特定的 Markdown 实现中使用，如 Obsidian，可以使用其特有的语法，使代码更加简洁。
• 样式管理：对于多个图片的样式管理，使用 CSS 可以提高代码的可维护性。

常见问题

1. 某些 Markdown 编辑器不支持特定语法

例如在 Ghost、Stackedit.io 等编辑器中，部分方法可能不适用。此时可以尝试使用 HTML 标签来解决。

2. Markdown linting 警告

如果使用 Markdown linting 工具，直接使用 HTML 标签可能会产生警告。可以在项目根目录创建 .markdownlint.json 文件，添加如下内容来抑制警告：

{
    "MD033": false,
    "MD013": false
}

3. 图片在表格中显示异常

当图片在 Markdown 表格单元格中时，可能会压缩旁边单元格的文本。可以通过设置表格列宽或在旁边单元格添加   来解决。