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

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

图片基本用法

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

Markdown 图片语法格式如下：

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

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

[![替代文字](图片地址)](链接图片跳转地址)

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

调整尺寸大小

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

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

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

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

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

调整对齐方式

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

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

调整图片位置	说明	实例
#pic_center	居中对齐	
#pic_left	靠左对齐	
#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> 标签包裹在 <p align=“center”> . . . </p>标签内使用，可以实现更多、更好的效果。

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

基础语法

也可通过将<img>标签包裹在<p align=“center”> . . . </p>标签内修改图片的对齐方式。

基础语法：

<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” 实现左文右图效果

实现左图右文或左文右图的效果
需要左右混排的文字放在<p > . . . </p>标签内，且需在<img>标签行的下面。放在<p > . . . </p>标签外的排版为正常的上下排版样式。
左图右文：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> 标签包裹在 <p align=“center”> … </p> 内，以获得更好的效果。同时，选择一个习惯的图床来存储图片会更加方便。

👍 点赞，是我创作的动力！
⭐️ 收藏，是我努力的指引！
✏️ 评论，是我进步的宝藏！
💖 衷心感谢你的阅读以及支持！