Markdown 高级图片控制 ∈ Markdown 使用笔记

Part.I Introduction

本文是 Markdown 使用笔记 的子博客，将介绍如何优雅地在 Markdown 中排版图片，让文档更加美观。

Part.II 插入图片的方式

可以用 Markdown 语法，也可以用 HTML 语法。

Chap.I Markdown 语法

插入图片的 Markdown 语法为

![在这里插入图片描述](在这里插入图片地址)

在写博文的过程中，直接复制图片然后贴进来，就是这种。

Chap.II HTML 语法

Markdown 兼容 HTML 语法，这让 HTML 本来就有的一些功能效果可以很轻松地在 Markdown 文档中实现（注意，只是一些）。基于 HTML 插入图片的语法为：

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

其中

• src 的值为图片的地址
• alt 的值为图片的描述
• width 和 height 的值为图片的宽度和高度。
• • 可以用百分比，它不是图片本身的百分比，而是页面的百分比。
• • 也可以用数字（默认是以像素为单位？）。

Part.III 图片控制

包括图片路径、图片大小、图片位置以及排版控制。

Chap.I 图片路径控制

在写网络博文时，图片的地址都是图片的 url，只要我们把图片上传到平台上，平台自动就会给图片赋予一个地址，这种情况自然不需我们操心。

在本地写 Markdown 文档的时候，就需要注意图片的路径了。图片路径可以用『绝对路径』，也可以用『相对路径』。绝对路径自不必说，相对路径的格式为

./xx/xx/img.png
../xx/xx/img.png

其中 . 表示文档所在的当前路径；.. 表示文档所在路径的上一级路径（parent directory）；可以 ../../../ 连着用。

Chap.II 图片大小控制

如果需要更改图片大小，而不改变图像的长宽比的话，width 和 height 参数只需指定一个即可，如下。

<img src="https://img-blog.csdnimg.cn/20210423141903295.png" width="50%"  />

---

下面看个实例

原图

<img src="https://i-blog.csdnimg.cn/blog_migrate/397ddc88855332ea405d7b3d4d6c0995.jpeg" />

页面的70%

<img src="https://i-blog.csdnimg.cn/blog_migrate/397ddc88855332ea405d7b3d4d6c0995.jpeg" width="70%"/>

改变图片长宽比

<img src="https://i-blog.csdnimg.cn/blog_migrate/397ddc88855332ea405d7b3d4d6c0995.jpeg" width="500" height="200"/>

Chap.III 图片位置控制

图片的位置默认是左对齐，可以通过语句来使其居中或右对齐。

居中

<center class="half">
<img src="https://i-blog.csdnimg.cn/blog_migrate/397ddc88855332ea405d7b3d4d6c0995.jpeg" />
</center>

右对齐

<p align = "right">    
<img  src="https://i-blog.csdnimg.cn/blog_migrate/397ddc88855332ea405d7b3d4d6c0995.jpeg"  />
</p>

Chap.IV 多图排版

如果想在一行显示多张图片，对比来看的话，使用 HTML 语法也可以轻松实现，方式有如下两种。

法1

<figure>
<img src="https://i-blog.csdnimg.cn/blog_migrate/397ddc88855332ea405d7b3d4d6c0995.jpeg" width=30%/>
<img src="https://i-blog.csdnimg.cn/blog_migrate/397ddc88855332ea405d7b3d4d6c0995.jpeg" width=30%/>
<img src="https://i-blog.csdnimg.cn/blog_migrate/397ddc88855332ea405d7b3d4d6c0995.jpeg" width=30%/>
</figure>

法2：利用表格

<table>
    <tr>
        <td ><center><img src="https://i-blog.csdnimg.cn/blog_migrate/397ddc88855332ea405d7b3d4d6c0995.jpeg" >图1  </center></td>
        <td ><center><img src="https://i-blog.csdnimg.cn/blog_migrate/397ddc88855332ea405d7b3d4d6c0995.jpeg"  >图2 </center></td>
    </tr>
    <tr>
        <td><center><img src="https://i-blog.csdnimg.cn/blog_migrate/397ddc88855332ea405d7b3d4d6c0995.jpeg" >图3 </center></td>
        <td ><center><img src="https://i-blog.csdnimg.cn/blog_migrate/397ddc88855332ea405d7b3d4d6c0995.jpeg"  >图4</center> </td>
    </tr>
</table>

图1	图2
图3	图4

Reference

• Markdown插入图片 详细例子(本地图片，网络图片，base64) Windows
• Markdwon中多张图片的并排显示