文章目录
1.图片语法格式
2.调整图片位置
居左
居中
居右
3.调整图片大小
等比缩放
固定宽高
参考文献
1.图片语法格式
插入图片后,Markdown 表示图片的语法格式如下:
![图片描述](图片URL地址)
2.调整图片位置
使用 Markdown 编写文档或博客时,经常需要对图片的位置与尺寸进行调整。
居左
居左一般为常见 Markdown 编辑器放置图片的默认位置,我们也可以显示设置图片居左。
(1)方法一:在 ULR 末尾添加位置标识。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200822014538211.png#pic_left)
(2)方法二:嵌入 HTML 代码。
居中
(1)方法一:添加位置标识。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200822014538211.png#pic_center)
(2)方法二:嵌入 HTML 代码。
居右
(1)方法一:添加位置标识。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200822014538211.png#pic_right)
(2)方法二:嵌入 HTML 代码。
3.调整图片大小
等比缩放
使用 img 标签表示图片时采用百分比形式只定义宽即可等比例缩放。注意:宽度相对于图片所在父级窗口。
固定宽高
(1)相对于自身宽高等比缩放。
如果您使用的 Markdown 编辑器支持 CSS 样式的话,那么可以使用 CSS zoom 属性对图片相对于自身大小进行等比缩放。遗憾的是大部分 Markdown 编辑器并不支持 CSS 样式,比如 CSDN Markdown。
一个通用可行的办法是指定宽或高的绝对数值进行等比缩放,只指定宽和高的其中一个。本文的示例图片尺寸为 481*279px,那么设置图片宽度为 240px 或高度为 140px 即可将图片宽高等比缩小为原来的一半。
# 或
(2)相对于自身宽高非等比缩放。
可以利用 CSS 的 transform:scale(x,y) 和 transform-origin:left top 来完成非等比缩放。其中 transform-origin:left top 的作用是改变缩放的中心点位置为左上角,而非默认的中心位置。
同样的,大部分 Markdown 编辑器并不支持 CSS 属性。不过好在该种操作并不常见,因为可能会导致图片变形。如果一定要宽高按照不同比例进行缩放,那么可以计算好缩放后的宽高像素值,采用下面指定宽高像素值的方式来实现。
(3)指定宽高,单位像素。
此种用法并不常见,因为可能会导致图片变形。
参考文献
[1] 知乎.markdown中插入图片怎么定义图片的大小或比例?
[2] CSDN 问答.HTML 如何设置图片宽高分别为原宽高的不同比例?
[3] 简书.css的Transform详解