Markdown 调整图片位置与大小

0.前言

大咖好呀，我是恋喵大鲤鱼。

Markdown 是一种轻量级的标记语言，设计用于将文本格式化为易于阅读和编写的格式。它广泛用于编写文档、博客文章、README 文件以及在网页上进行格式化文本展示。Markdown 的设计目标是简单、易读、易写，同时又能够产生格式良好的输出。

在使用 Markdown 编写文章时，经常需要插入图片，并对图片进行位置和样式的调整。本文介绍 Markdown 调整图片位置与大小的常用方法。

1.图片语法格式

插入图片后，Markdown 表示图片的语法格式如下：

![描述](图片URL地址)

2.调整图片位置

使用 Markdown 编写文档或博客时，经常需要对图片的位置与尺寸进行调整。

2.1 居左

居左一般为常见 Markdown 编辑器放置图片的默认位置，我们也可以显示设置图片居左。

（1）方法一：在 ULR 末尾添加位置标识。

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png#pic_left)

（2）方法二：嵌入 HTML 代码。

<div align=left>
<img src=https://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png />
</div>

2.2 居中

（1）方法一：添加位置标识。

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png#pic_center)

（2）方法二：嵌入 HTML 代码。

<div align=center>
<img src=https://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png />
</div>

2.3 居右

（1）方法一：添加位置标识。

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png#pic_right)

（2）方法二：嵌入 HTML 代码。

<div align=right>
<img src=https://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png />
</div>

3.调整图片大小

3.1 等比缩放

相对父级元素

使用 img 标签表示图片时采用百分比形式只定义宽即可等比例缩放。注意：宽度相对于图片所在父级窗口。

<img src=https://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png width=100% />

相对自身

如果您使用的 Markdown 编辑器支持 CSS 样式的话，那么可以使用 CSS zoom 属性对图片相对于自身大小进行等比缩放。遗憾的是大部分 Markdown 编辑器并不支持 CSS 样式，比如 CSDN Markdown。

<img src=https://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png style="zoom:50%;" />

一个通用可行的办法是指定宽或高的绝对数值进行等比缩放，只指定宽和高中一个。

本文的示例图片尺寸为 481*279px，那么设置图片宽度为 240px 或高度为 140px 即可将图片宽高等比缩小为原来的一半。

<img src=https://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png width=240 />
# 或
<img src=https://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png height=140 />

特定的 Markdown 编辑器可能有自己的方法进行等比缩放，比如 CSDN 的 Markdown 编辑器指定图片宽度或者高度实现等比例缩放。

宽度确定高度等比例的图片: ![Alt](https://img-home.csdnimg.cn/images/20220524100510.png =60x)
高度确定宽度等比例的图片: ![Alt](https://img-home.csdnimg.cn/images/20220524100510.png =x60)

3.2 非等比缩放

可以利用 CSS 的属性 transform:scale(x,y) 和 transform-origin:left top 来完成非等比缩放。其中 transform-origin:left top 的作用是改变缩放的中心点位置为左上角，而非默认的中心位置。

<img src=https://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png style="transform:scale(0.8,0.5);transform-origin:left top;" />

同样的，大部分 Markdown 编辑器并不支持 CSS 属性。不过好在该种操作并不常见，因为可能会导致图片变形。

如果一定要宽高按照不同比例进行缩放，那么可以计算好缩放后的宽高像素值，采用指定宽高像素值来实现。

<img src=https://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png width=384 height=140  />

特定的 Markdown 编辑器可能有自己的方法指定图片的宽高，比如 CSDN 的 Markdown 编辑器指定带尺寸的图片：

![Alt](https://img-home.csdnimg.cn/images/20220524100510.png =60x60)

图片链接最后一部分 =60x60 表示图片的宽高均是 60 像素。注意等号前要有空格。

---

参考文献

知乎.markdown中插入图片怎么定义图片的大小或比例？
CSDN 问答.HTML 如何设置图片宽高分别为原宽高的不同比例？
简书.css的Transform详解