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详解