目录
一、csdn的MD编辑器插入图片的方式：
1.1 图片对齐方式
1.2 指定图片尺寸
二、内嵌HTML语法实现插入图片
三、实例讲解

Markdown是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档，可与HTML混编，可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写，Markdown被大量使用，如Github、Wikipedia、简书等。

Markdown编辑器提供了简单的插入图片的方法，但根据不同的编辑器，默认的方式可能不同，有些是默认左对齐，有些则是默认居中对齐，而且没有缩放功能，但也能满足大多数的写作需求。如果想要使用更丰富的关于插入图片的操作，可以采用内嵌HTML的方式来编写 Markdown 文件。下面先看一下csdn的markdown编辑器插入图片的方式，然后介绍一下使用 HTML 的方式来插入图片的方法。

一、csdn的MD编辑器插入图片的方式：

不同的markdown编辑器可能有不同的显示效果，下面介绍的是CSDN的MD编辑器。
它插入图片语法：![图片描述](图片链接)

1.1 图片对齐方式

csdn的MD编辑器直接点图片按钮插入图片的方式就是居中对齐的，按图片的实际尺寸显示，这是默认的图片插入方式。它会在图片链接后面加上#pic_center的字样，由此可以推断：左对齐对应#pic_left，右对齐对应#pic_right，下面直接看例子。

1.1.1 markdown格式文本

- 下图是居中显示-图片默认插入方式
![图片描述](https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_center)
- 下图是左对齐显示
![图片描述](https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_left)
- 下图是右对齐显示
![图片描述](https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_right)

1.1.2 显示效果

下图是居中显示-图片默认插入方式
下图是左对齐显示
下图是右对齐显示

1.2 指定图片尺寸

csdn的MD编辑器提供了带尺寸的图片的插入方式，就是在图片链接的最后加上空格、等号宽x高，例如添加30x30尺寸就是=30x30,注意等号前面有个空格。下面用markdown文本举个例子。上面那个图片原图是360x360的，下面把它按照180x180地尺寸添加进来看看效果。至于左对齐、右对齐的尺寸，自己结合着使用就行了。

1.2.1 markdown格式文本

![图片描述](https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_center =180x180)

1.2.2 显示效果

二、内嵌HTML语法实现插入图片

HTML插入图片的基础语法： <img src="图片链接" alt="图片alt" title="图片title">
使用HTML语法插入图片，默认是左对齐的，可以用<div>标签来改变其对齐方式，<div>标签定义一个区域，使用align属性可以改变定义的区域的对齐方式。其他属性参阅下面的例子，2.1 markdown格式文本可以直接拷贝到markdown编辑器去看效果。

在 HTML 中，
<img>标签用来定义图片，是空标签，意思是说，它只包含属性，并且没有闭合标签。
src指 “source”。源属性的值是图像的 URL 地址
alt属性用来为图像定义一串可替换的文本。无法载入图像时，替换文本告诉读者，他们失去的信息。
title属性描述了元素的额外信息 (作为工具条使用)
height(高度) 与 width(宽度) 属性用于设置图像的高度与宽度。
style属性规定元素的行内样式（inline style），定义图片时可以用来缩放

<div>标签用来定义文档中的一个分隔区块或者一个区域部分
align属性用来对齐，它的值有left、right、center、justify

2.1 markdown格式文本

- `<img>`标签添加图片
<img src="https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png" alt="这是一张摩托车图片">
- `alt`属性 - 这里图片链接错误，图片无法载入，所以显示了`alt`属性的文本
<img src="https://img-blog.csdnimg.cn/" alt="这是一张摩托车图片">
- `height、width`属性 - 指定宽高为150
<img src="https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png" width=150 height=150>
- `<div>` 标签的`align`属性 - 使图片和文本居中，左对齐`left`，右对齐`right`
<div align=center>
<img src="https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png">
<br>摩托车图片</div>

2.2 显示效果

<img>标签添加图片
alt属性 - 这里图片链接错误，图片无法载入，所以显示了alt属性的文本
height、width属性 - 指定宽高为150
<div> 标签的align属性 - 使图片和文本居中，左对齐left，右对齐right

摩托车图片

上面例子中还有个别属性没有使用，原因是csdn的MD编辑器不支持，没有效果，所以不展示了，总结起来就是图片的对齐方式和指定尺寸显示。我是前两天想使图片左对齐而去查找的资料，在此记录一下。下篇文章将介绍 markdown 编辑器自定义表格。

参考资料：
HTML 参考手册
Markdown语法
Markdown样式自定义及详解

相关系列文章：
Markdown编辑器(一) - 实现页内跳转
Markdown编辑器(二) - 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)
Markdown编辑器(三) - 图片缩放、指定尺寸、居中、左对齐、右对齐
Markdown编辑器(四) - 漂亮表格(表格背景色、跨行、跨列、多行)

Markdown (CSDN) MD编辑器（三）- 图片缩放、指定尺寸、居中、左对齐、右对齐相关推荐

Markdown (CSDN) MD编辑器（一）- 实现页内跳转
目录一.创建锚点二.引用锚点三.实例讲解 Markdown是一种轻量级标记语言,排版语法简洁,让人们更多地关注内容本身而非排版.它使用易读易写的纯文本格式编写文档,可与HTML混编,可导出 HT ...
Markdown (CSDN) MD编辑器（四）- 漂亮表格(表格背景色、跨行、跨列、多行)
目录一.markdown表格二.HTML表格 2.1 标签属性 2.2 跨列单元格(合并单元格) 2.3 跨行单元格(合并单元格) 2.4 单元格内换行 2.5 单元格背景色 2.6 ...
Markdown (CSDN) MD编辑器（二）- 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)
目录 1.Markdown现有的文本样式. 2.HTML的font标签-改字体.字体颜色.字体大小. 3.HTML的mark标签-标记文本 4.HTML的strong标签-加粗文本 5.HTML的em ...
Markdown (CSDN) MD编辑器（四）- 漂亮表格(表格背景色、跨行、跨列)
Markdown是一种轻量级标记语言,排版语法简洁,让人们更多地关注内容本身而非排版.它使用易读易写的纯文本格式编写文档,可与HTML混编,可导出 HTML.PDF 以及本身的 .md 格式的文件.因 ...
CSDN博客 - Markdown：博客内图片缩放、删减水印等的相关操作
因为CSDN也不断在更新,发现它现在的编辑器也有更新, 这样以前的一些操作就失效了,所以写了这个文章, 希望对CSDN的小伙伴们能有所帮助. 如果发现本文有和现在博客操作不一致的情况,欢迎留言或者私信 ...
[Typora Markdown BP] 修改文字格式、图片缩放对齐居中、Excel表格互转、手动分页、表格不分页、Mermaid自定义绘图（以自动机为例）、思维导图导出、word导出删文字、自动编号
目录文章较长,请点击书签浏览感兴趣的内容. CSDN的渲染与Typora未必一致,下面所有功能都在Typora上测试成功. 文章目录前言全局设置效果类修改字体.颜色.字体大小.行高等文字居 ...
微信公众平台后台编辑器上线图片缩放和封面图裁剪功能
今日,微信公众平台后台编辑器又上线了两个更新,图片缩放和封面图裁剪功能,微信团队真喜欢深夜放毒,不想让人睡的节奏.[微信公众平台编辑器可以剪裁和替换正文图片了] 两个新增的功能如下 1.图片缩放插入 ...
ASP.NET将原始图片按照指定尺寸等比例缩放显示图片
网站上可能会有很多图片,比如产品图片等,而且他们可能大小不一,宽度和高度也不一定一样,有的很大有的很小.如果放在一张网页上,可能会破坏版面,但是如果强制让他们按照指定的宽度和高度显示,因为比例不同还会 ...
怎么截取一个图片的指定尺寸？
第一种方法: 1.点击图像--图像大小; 2.设置图片宽度打开图像大小对话框,在这里面设置图片的宽度,高度会自动变化,设置完成后,点击"确定"按钮. 第二种方法:裁剪工具第 ...

Markdown (CSDN) MD编辑器（三）- 图片缩放、指定尺寸、居中、左对齐、右对齐