文章目录
Part.I Introduction
本文是 Markdown 使用笔记 的子博客,将介绍如何优雅地在 Markdown 中排版图片,让文档更加美观。
Part.II 插入图片的方式
可以用 Markdown 语法,也可以用 HTML 语法。
Chap.I Markdown 语法
插入图片的 Markdown 语法为
![在这里插入图片描述](在这里插入图片地址)
在写博文的过程中,直接复制图片然后贴进来,就是这种。
![](https://img-blog.csdnimg.cn/direct/3f3dea58d4ef4c47b09c60b4b9615277.png)
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://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg" />
![](https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg)
页面的70%
<img src="https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg" width="70%"/>
![](https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg)
改变图片长宽比
<img src="https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg" width="500" height="200"/>
![](https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg)
Chap.III 图片位置控制
图片的位置默认是左对齐,可以通过语句来使其居中或右对齐。
居中
<center class="half">
<img src="https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg" />
</center>
![](https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg)
右对齐
<p align = "right">
<img src="https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg" />
</p>
Chap.IV 多图排版
如果想在一行显示多张图片,对比来看的话,使用 HTML 语法也可以轻松实现,方式有如下两种。
法1
<figure>
<img src="https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg" width=30%/>
<img src="https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg" width=30%/>
<img src="https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg" width=30%/>
</figure>
![](https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg)
![](https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg)
![](https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg)
法2:利用表格
<table>
<tr>
<td ><center><img src="https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg" >图1 </center></td>
<td ><center><img src="https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg" >图2 </center></td>
</tr>
<tr>
<td><center><img src="https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg" >图3 </center></td>
<td ><center><img src="https://img-blog.csdnimg.cn/direct/7e5733f81fa548f1b9acf1448925de2a.jpeg" >图4</center> </td>
</tr>
</table>
![]() |
![]() |
![]() |
![]() |