Markdown 图片尺寸对齐等详细使用

✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页：开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您些帮助请👉关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

在这里插入图片描述

文章目录

图片基本用法
- 调整尺寸大小
- 调整对齐方式
- 总结Markdown效果示例
内嵌HTML语法
- HTML基础语法
- HTML调整尺寸大小
- HTML调整对齐方式
- HTML 使用p标签实现复杂排版
- - 基础语法
  - 图文混排效果实现
- 总结HTML效果示例
总结

图片基本用法

图片是比文字更容易表达多方位信息的媒介。Markdown 自然也为图片的添加提供了便捷的方法。

Markdown 图片语法格式如下：

![替代文字](图片地址)![替代文字](图片地址 "可选标题")[![替代文字](图片地址)](链接图片跳转地址)

以感叹号 ! 开始
紧接着方括号，包含图片的替代文字
接下来是普通括号，内含图片的URL地址，你还可以使用引号包裹并加上可选的 ‘title’ 属性文字。

调整尺寸大小

直接在连接地址后添加例如=宽x高的数字即可调整图片大小。

如果需要调整图片大小，只需在图片地址后添加尺寸参数，例如：

![替代文字](图片地址 =600x600)

说明：等号 " = " 前面需要有一个空格 =宽x高

带尺寸的图片：=600x600
宽度确定高度等比例的图片：=600x
高度确定宽度等比例的图片：=x600

调整对齐方式

若需要调整对齐方式，需要在图片链接地址后面添加指令#pic_center，该命令的位置在指定尺寸的指令前面。

![图片描述](图片链接#pic_center)

调整图片位置	说明	实例
`#pic_center`	居中对齐	`![图片描述](图片链接#pic_center)`
`#pic_left`	靠左对齐	`![图片描述](图片链接#pic_left)`
`#pic_right`	靠右对齐	`![图片描述](图片链接#pic_right)`

说明：# 前面不需要空格，= 前面需要有一个空格

总结Markdown效果示例

这里总结了一个例子：
对齐方式：#pic_center
图片大小：=300x200
图片链接：(https://blog.csdn.net/u014696856)
这里就不一一举例了，总结一个实例剩下的大家去实践。

[![这是图片](https://img-blog.csdnimg.cn/direct/6de94c45061d424f95dd253b6bce6ec9.webp#pic_center =300x200)](https://blog.csdn.net/u014696856)

这是图片

内嵌HTML语法

HTML基础语法

基础语法：

<img src="图片链接"><img src="图片链接" alt="图片alt" title="图片title">

src 属性指定图像的URL地址
alt 属性为图像定义可替换的文本
title 属性描述元素的额外信息

可以通过 width 和 height 属性设置图像的尺寸，通过 style 属性定义行内样式，包括缩放效果。

HTML调整尺寸大小

基础语法：

<img src="图片链接" width="100%"><img src="图片链接" alt="图片alt" title="图片title">

调整图片尺寸	说明	实例
`width="100%"`	横向占比	`<img src="图片链接" width="100%">`
`width="600"`	宽度	`<img src="图片链接" width="600">`
`height="600"`	高度	`<img src="图片链接" height="600">`

调整位置和尺寸举个例子：
<img src=“图片链接” align = “right” width=“600” height=“600”/>

HTML调整对齐方式

基础语法：

<img src="图片链接" align = "left">

调整图片位置	说明	实例
`align`	居中对齐： align = “middle” 靠左对齐： align = “left” 靠右对齐： align = “right”	align属于img标签属性，使用起来也简单例如： `<img src="图片链接" align = "right"/>`

注意图片描述可以不写,调整图片的位置追加在图片链接的后面
最好将 <img> 标签包裹在  . . . 标签内使用，可以实现更多、更好的效果。

HTML 使用p标签实现复杂排版

基础语法

也可通过将<img>标签包裹在 . . . 标签内修改图片的对齐方式。

基础语法：

<p>    <img src="图片链接"/>
</p><p align="center">    <img src="图片链接" width="400"/>
</p><p align="center">    <img src="图片链接1" width="400"/><img src="图片链接2" width="400"/><img src="图片链接3" width="400"/><img src="图片链接4" width="400"/>
</p>

图文混排效果实现

要实现左图右文或左文右图的效果，需要在标签后添加 align 属性：

align=“left” 实现左图右文效果
align=“right” 实现左文右图效果

实现左图右文或左文右图的效果
需要左右混排的文字放在 . . . 标签内，且需在<img>标签行的下面。放在 . . . 标签外的排版为正常的上下排版样式。
左图右文：align = “left”
左文右图：align = “right”

基础语法：

<p>    <img src="图片链接" width="400" align="left"/>文字在右边，图片在左边。
</p><p>    <img src="图片链接" width="400" align="right"/>文字在左边，图片在右边。
</p>

总结HTML效果示例

写了两个复杂的实例，经过这两个实例HTML图片基本都能实现，图文混排的不能能实现太复杂的效果，很多浏览器也不支持 <style>实现复杂的效果。

**四个图片成正方形显示：**
<p align = "center">    
<img  src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" width="400" />
</p>**图文显示示例：**
<p align = “center”>    <img src="https://img-blog.csdnimg.cn/img_convert/9f0a5f6a82cbc594408f7b345284bce1.png" width="200" align="left"/><br> <br>Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。<br>Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建。<br>Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。<br>Markdown 编写的文档后缀为 .md, .markdown。
</p>

四个图片成正方形显示：

图文显示示例：

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。
Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建。
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
Markdown 编写的文档后缀为 .md, .markdown。

总结

Markdown 文档只能引用外部图片，无法在像 word 一样将图片嵌入到文档中，给自己找一个习惯的图床是个好方法。
Markdown 文档里很难实现图文混排，比如文字环绕图片、图片覆盖文字这类 Word 中的效果，如果需要这样的排版，建议直接选用 Word 。
Markdown 文档虽然不能嵌入图片，但通过引用外部图片和HTML语法，我们可以实现丰富的图文排版效果。需要注意的是，在实现图文混排时，建议将 <img> 标签包裹在  …  内，以获得更好的效果。同时，选择一个习惯的图床来存储图片会更加方便。