文章目录

1.图片语法格式 2.调整图片位置

text
1 2 3 4 5 6 7 
<a href="#21__10">2.1 居左</a>    <a href="#22__28">2.2 居中</a>    <a href="#23__43">2.3 居右</a>      <a href="#3_58">3.调整图片大小</a>   

<a href="#31__59">3.1 等比缩放</a>    
 
  <a href="#311__60">3.1.1 相对父级元素</a>      <a href="#312__67">3.1.2 相对自身</a>         <a href="#32__80">3.2 非等比缩放</a>    
 
  <a href="#321_CSS__81">3.2.1 CSS 属性</a>      <a href="#322__86">3.2.2 指定宽高（单位像素）</a>            <a href="#_96">参考文献</a>

1.图片语法格式

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

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

2.调整图片位置

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

2.1 居左

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

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

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

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

text
1 2 3 4 
<div align=left>
<img src=https://img-blog.csdnimg.cn/20200822014538211.png />
</div>

2.2 居中

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

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

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

text
1 2 3 4 
<div align=center>
<img src=https://img-blog.csdnimg.cn/20200822014538211.png />
</div>

2.3 居右

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

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

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

text
1 2 3 4 
<div align=right>
<img src=https://img-blog.csdnimg.cn/20200822014538211.png />
</div>

3.调整图片大小

3.1 等比缩放

3.1.1 相对父级元素

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

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

3.1.2 相对自身

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

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

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

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

3.2 非等比缩放

3.2.1 CSS 属性

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

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

3.2.2 指定宽高（单位像素）

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

text
1 2 
<img src=https://img-blog.csdnimg.cn/20200822014538211.png width=384 height=140  />

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

参考文献

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

原文地址：https://blog.csdn.net/K346K346/article/details/108162853?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168915726716800197057299%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168915726716800197057299&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-14-108162853-null-null.142^v88^insert_down1,239^v2^insert_chatgpt&utm_term=markdown