在搭建Markdown图床环境这篇文章中介绍了如何利用图床在Markdown中插入图像自动上传到云端,避免因路径问题倒是文件移植受限。
但在使用过程中发现在本地使用Typora写的Markdown文件,图像缩放等很方便,
但将源代码复制到例如CSDN博客等支持Markdown格式的平台时,图像缩放、布局无效
本文介绍一种可以任意移植Markdown代码的图像插入方式。
1. 使用Typora在Markdown中插入图片的方法
正常的格式应该是这样的:
![](图像地址)
但这样就不能缩放、布局
使用Typora会自动提示缩放等并自动转为这种格式
<img src="图像地址" alt="blister_04_Pills" style="zoom:80%;" />
这样就可以实现图像的缩放了。但将源代码复制到其他平台,只能显示图像,但缩放等就无效了。
2. 使用HTML标签
首先HTML标签标签的格式是这样的
<div align="center">
<img src="" width="50%">
</div>
3. HTML < img> 标签的常见功能
必需的属性
属性 | 值 | 描述 |
---|---|---|
alt | text | 规定图像的替代文本。 |
src | URL | 规定显示图像的 URL。 |
可选的属性
属性 | 值 | 描述 |
---|---|---|
align | topbottommiddleleftright | 不推荐使用。规定如何根据周围的文本来排列图像。 |
border | pixels | 不推荐使用。定义图像周围的边框。 |
height | pixels*%* | 定义图像的高度。 |
hspace | pixels | 不推荐使用。定义图像左侧和右侧的空白。 |
ismap | URL | 将图像定义为服务器端图像映射。 |
longdesc | URL | 指向包含长的图像描述文档的 URL。 |
usemap | URL | 将图像定义为客户器端图像映射。 |
vspace | pixels | 不推荐使用。定义图像顶部和底部的空白。 |
width | pixels*%* | 设置图像的宽度。 |
4. 详细用法
可参考 HTML < img> 标签
功能很强大