Markdown 调整图片位置与大小

1.图片语法格式

插入图片后,Markdown 表示图片的语法格式如下:

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

2.调整图片位置

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

居左

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

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

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

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

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

居中

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

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

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

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

居右

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

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

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

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

3.调整图片大小

等比缩放

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

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

固定宽高

(1)相对于自身宽高等比缩放。

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

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

一个通用可行的办法是指定宽或高的绝对数值进行等比缩放,只指定宽和高的其中一个。本文的示例图片尺寸为 481*279px,那么设置图片宽度为 240px 或高度为 140px 即可将图片宽高等比缩小为原来的一半。

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

(2)相对于自身宽高非等比缩放。

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

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

同样的,大部分 Markdown 编辑器并不支持 CSS 属性。不过好在该种操作并不常见,因为可能会导致图片变形。如果一定要宽高按照不同比例进行缩放,那么可以计算好缩放后的宽高像素值,采用下面指定宽高像素值的方式来实现。

(3)指定宽高,单位像素。

此种用法并不常见,因为可能会导致图片变形。

<img src=https://img-blog.csdnimg.cn/20200822014538211.png width=200 height=120 />

参考文献

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

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页