Markdown Best Practice - 定制图片

最新推荐文章于 2022-07-24 14:04:10 发布

原创最新推荐文章于 2022-07-24 14:04:10 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

Markdown 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何使用Markdown语法灵活定制图片，包括图片大小调整、位置布局及多图并排显示等实用技巧，帮助读者提升Markdown文档的编辑技能。

定制图片

Markdown中图片的定制包括图片大小，图片说明等。Markdown中的图片建议用img标签，可灵活定制。

用`center`实现居中

示例：

<center>
<img src="https://i-blog.csdnimg.cn/blog_migrate/a1643fdd44fe84524baf8c5017170418.png" width="25%" height="25%" alt="markdown图片示例" title="jazz"/>
</center>
<center>
Figure 1. jazz-dev
</center>

显示效果：

Figure 1. jazz-dev

用`div`实现

<div align="right">
<img src="https://i-blog.csdnimg.cn/blog_migrate/a1643fdd44fe84524baf8c5017170418.png" width="25%" height="25%"  />
</div>

显示效果：

多图并排显示

通过div标签和align属性控制对齐方式。

示例：

<div align="center">
<img src="https://i-blog.csdnimg.cn/blog_migrate/7e7f99274c94517093feb6b6725cf4a1.jpeg" height="330" width="190" >
<img src="https://i-blog.csdnimg.cn/blog_migrate/9b4f9468a017f6691bad56349115f299.jpeg" height="330" width="190" >
<img src="https://i-blog.csdnimg.cn/blog_migrate/ffba5a171d0303c03841720e71feb0a4.jpeg" height="330" width="190" >
</div>