在Typora中添加图片并调整图片

HelloWorld-Yxx

已于 2024-01-29 09:46:13 修改

阅读量5.5k

点赞数 15

分类专栏： Typora 文章标签：编辑器

于 2024-01-21 09:23:28 首次发布

本文链接：https://blog.csdn.net/qq_35992930/article/details/135725676

版权

Typora 专栏收录该内容

3 篇文章

订阅专栏

1.添加图片

1.1使用 Markdown 图片语法

在Markdown 中添加图片三种方式：

![替代文本](图片链接 "图片标题")

1.1.1使用外部链接

使用图片的外部链接，例如：

![替代文本](https://example.com/image.jpg "图片标题")

1.1.2使用相对路径

如果图片在同一目录下，你可以使用相对路径：

![替代文本](./image.jpg "图片标题")

1.1.3使用本地文件

如果图片在本地文件系统中，你也可以提供本地路径：

![替代文本](file:///path/to/image.jpg "图片标题")

这里使用百度链接作为示例：

![百度](https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png "百度搜索")

1.2使用 HTML 标签

在Typora中也可以使用 HTML 标签添加图片

<img src="https://example.com/image.jpg" alt="替代文本" title="图片标题">

src 属性指定了图片的路径，可以将路径像上面一样添加相对路径或绝对路径，也可以是网络上的 URL。

请注意：

"替代文本" 提供一个对图片的描述，这在图片无法加载时会显示。
"图片标题" 也是可选的，可以在鼠标悬停在图片上时显示。
在某些情况下，Markdown 解析器可能不支持所有的特性，这取决于你使用的编辑器或平台。

2.调整图片

在 Typora 中，添加一些参数和标记来调整插入的图片的大小和布局。

2.1调整大小

使用 width 和 height 属性可以调整图片的大小。例如：

<img src="路径" alt="替代文本" width="200" height="200">

将图片的宽度设置为 200 像素，高度设置为 200 像素。

还可以使用zoom来缩放图片的显示大小。如将图片的显示大小缩小到原始大小的 50%：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度" style="zoom:50%;" >

2.2居中显示

float 属性来设置图片的浮动位置如left，center，right。

<img src="路径" alt="替代文本" style="float:center;">

例如：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度" style="float:center;">

还可以通过align调整图片的位置:

<img src="路径" alt="替代文本" align="left">

2.3设置边距

使用 margin 属性来设置外边距。

<img src="路径" alt="替代文本" style="margin: 10px;">

设置了图片的外边距为10像素。

例如：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度" style="margin: 10px;">

2.4设置边框

使用 border 属性添加边框。

<img src="路径" alt="替代文本" style="border: 1px solid black;">

给图片添加一个1像素的黑色实线边框。

例如：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度" title="百度搜索" style="border: 1px solid black;"/>

最后图片调整为居中，缩小50%和添加一个1像素的黑色实线边框，例如：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度" title="百度搜索" align="center" style="zoom:50%; border: 1px solid black;"/>