markdown如何设置图片大小_Markdown 调整图片位置与大小

文章目录

1.图片语法格式

2.调整图片位置

居左

居中

居右

3.调整图片大小

等比缩放

固定宽高

参考文献

1.图片语法格式

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


2.调整图片位置

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

居左

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

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


(2)方法二：嵌入 HTML 代码。

居中

(1)方法一：添加位置标识。


(2)方法二：嵌入 HTML 代码。

居右

(1)方法一：添加位置标识。


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