CSDN Markdown 图片排版与缩放显示

原创已于 2024-11-30 11:29:04 修改 · 5.8k 阅读

13 ·

CC 4.0 BY-SA版权

世上没有白读的书，每一页都算数。

文章标签：

#Markdown 图片排版 #多张图片并排显示 #图片缩放显示 #多张图片换行显示 #图片居左/居中/居右显示

于 2019-01-07 19:25:29 首次发布

Markdown - LaTeX 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了在Markdown中如何进行图片排版，包括多张图片的换行与并排显示、单张图片的居左/居中/居右显示以及图片的缩放显示方法。这些技巧有助于提升Markdown文档的阅读体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Markdown 多张图片换行显示

![插入图片描述](图片链接地址)
![插入图片描述](图片链接地址)
![插入图片描述](图片链接地址)

FOR INSTANCE

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/96385c7e2853f8c4f43e46632d3b7365.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/96385c7e2853f8c4f43e46632d3b7365.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/96385c7e2853f8c4f43e46632d3b7365.png)

在这里插入图片描述

2. Markdown 多张图片并排显示

多张图片并排显示时，图片链接依次填写，中间不能有换行。

![插入图片描述](图片链接地址)![插入图片描述](图片链接地址)![插入图片描述](图片链接地址)

FOR INSTANCE

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/96385c7e2853f8c4f43e46632d3b7365.png)![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/96385c7e2853f8c4f43e46632d3b7365.png)![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/96385c7e2853f8c4f43e46632d3b7365.png)

在这里插入图片描述

两个图片链接之间不要换行。

3. Markdown 单张图片居左/居中/居右显示

使用 Markdown 在编写文档时插入图片是默认靠左。图片链接尾部添加 #pic_left / #pic_center / #pic_right，图片居左/居中/居右显示。

![请添加图片描述](https://i-blog.csdnimg.cn/blog_migrate/6cf9866fd3acc8352cfc869973c5f72b.png)
![请添加图片描述](https://i-blog.csdnimg.cn/blog_migrate/36b419124e96461a74b4129de527a9a8.png#pic_center)
![请添加图片描述](https://i-blog.csdnimg.cn/blog_migrate/913a5a5e91464417b9d7093f2466dc92.png#pic_right)

AI_Benchmark_V5_Preview\assets\task_4\4_ac.png

请添加图片描述

4. Markdown 单张图片缩放显示

如果图片尺度太大的话，可以设置图片的宽度或者高度，这样图片就会缩放。同时设置宽度和高度，如果宽度和高度比例不合适，会使图像变形。

图片链接尾部添加 =50%x50%，图片 height and width 分别缩小 50% 显示。
图片链接尾部添加 =25%x25%，图片 height and width 分别缩小 25% 显示。

![请添加图片描述](https://i-blog.csdnimg.cn/blog_migrate/36b419124e96461a74b4129de527a9a8.png#pic_center =50%x50%)
![请添加图片描述](https://i-blog.csdnimg.cn/blog_migrate/36b419124e96461a74b4129de527a9a8.png#pic_center =25%x25%)

AI_Benchmark_V5_Preview\assets\task_4\4_ac.png

请添加图片描述