Markdown (CSDN) MD编辑器（三）- 图片缩放、指定尺寸、居中、左对齐、右对齐
时间：2023-01-02 10:30:00
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格式文本
- 下图为中间显示-图片默认插入  - 下图显示左对齐  - 下图显示右对齐  ? 1.1.2 显示效果
- 下图为中间显示-图片默认插入
- 下图显示左对齐
- 下图显示右对齐
1.2 指定图片尺寸
csdn的MD编辑器提供插入大小图片的方法，即在图片链接的最后添加x格，等号宽x高，例如添加30x30尺寸就是=30x30,注意等号前面的空间。markdown举个例子。上图原图为360x360，以下是180x添加180个尺寸以查看效果。至于左对齐和右对齐的尺寸，可以自己使用。
? 1.2.1 markdown格式文本
 ? 1.2.2 显示效果
二、内嵌HTML插入图片的语法实现
HTML插图的基本语法： 在 HTML 中， 由于上述例子中没有使用个别属性，csdn的MD编辑器不支持，没有效果，所以不显示，总之是图片对齐方式和指定尺寸显示。我想在前两天左对齐图片，在这里记录下来。下一篇文章将介绍 markdown 编辑器自定义表格。 参考资料： 相关文章： 动力学技术KTU1121 USB Type-C 端口保护器的介绍、特性、及应用 Sensata PTE7300密封数字压力传感器的介绍、特性、及应用 PANJIT PBHV8110DA/PBHV9110DA低Vce(sat)晶体管的介绍、特性、及应用 ams OSRAM OSLON 黑色平板X LED器件的介绍、特性、及应用 Cree LED CLQ6A三合一贴片LED的介绍、特性、及应用 Cree LED CLQ6B 4-in-1 RGBW贴片LED的介绍、特性、及应用 NDK NX1210AB表面贴装晶体的介绍、特性、及应用 伊顿ACE2V3225共模芯片电感器的介绍、特性、及应用 意法半导体X040灵敏型栅可控硅和Z040可控硅的介绍、特性、及应用 ABLIC S-82Y1B电池保护芯片的介绍、特性、及应用
使用HTML语法插入图片，默认为左对齐，可以使用align属性可以改变定义的区域的对齐方式。其他属性参阅下面的例子，2.1 markdown格式文本可以直接复制到markdown编辑器去看效果。
src指 “source。图像是源属性值的值 URL 地址
alt该属性用于为图像定义一系列可替代的文本。当图像无法载入时，替换文本告诉读者他们失去的信息。
title属性描述了元素的额外信息 (作为工具条使用)
height(高度) 与 width(宽度) 设置图像的高度和宽度。
style属性规定元素的行内风格（inline style），定义图片可用于缩放
align属性用于对齐，其值left、right、center、justify
2.1 markdown格式文本
2.1 显示效果
alt属性 - 这里图片链接错误，图片无法载入，所以显示了alt属性的文本
height、width属性 - 指定宽高为150
align属性 - 左对齐图片和文本left，右对齐right
摩托车图片
HTML 参考手册
Markdown语法
Markdown风格自定义和详解
Markdown编辑器(1) - 实现页内跳转
Markdown编辑器(2) - 文本风格(改变字体、字体大小、字体颜色、粗体、斜体、亮度、删除线)
相关文章
