Typora中将多张图片并排/分行显示

最新推荐文章于 2024-05-01 15:22:52 发布

M010K

最新推荐文章于 2024-05-01 15:22:52 发布

阅读量2.2w

点赞数 57

分类专栏： Typora 文章标签： html Typora

本文链接：https://blog.csdn.net/qq_43444349/article/details/107292803

版权

Typora 专栏收录该内容

11 篇文章

订阅专栏

Typora中将多张图片并排/分行显示

最近在使用Typora的过程中遇到了一个问题：通常将图片以图床链接放在typora中只能一行显示一张图片，但是遇到多张图片要并排显示的时候就有所不足了，思考之后决定解决一下这个问题，这里记录一下方法

解决思路

根据之前在Typora中处理文本的经验，加上Typora天然支持Html语法，故考虑用html的格式来将图片并排处理

解决方法

两张图片并排显示

<center class="half">
    <img src="img1.jpg" width="300"/>
    <img src="img2.jpg" width="300"/>
</center>

直接在typora中复制这段代码，并将img1.jpg和img2.jpg修改成对应的图床链接即可（有不清楚图床链接的麻烦搜索一下）

当然，如果不想要使用图床的话，可以将img1.jpg和img2.jpg修改成本地图片的路径（亲测有效）

下面给出示例

图片使用的是新浪图床，链接为https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg

两张图片并排显示的效果如下（width均为300）：

<center class="half">
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="300"/>
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="300"/>
</center>

三张图片并排显示的效果如下（width均为200）：

<center class="half">
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="200"/>
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="200"/>
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="200"/>
</center>

四张图片并排显示的效果如下（width均为150）：

<center class="half">
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="150"/>
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="150"/>
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="150"/>
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="150"/>
</center>

若需要将四张图片分两行显示也仅需要调整width即可：

<center class="half">
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="300"/>
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="300"/>
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="300"/>
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="300"/>
</center>

同时设置图片height和width

<center class="half">
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="300" height="400"/>
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="300"/>
</center>

效果如图

注意

为了能够并排显示且不影响显示效果，所要并排显示的图片最好不要过大
此处仅设置了图片的宽度，如需要设置高度的话可以做如下修改,修改成自定义的高度即可（但是不推荐，只设置一个宽度或高度会等比例对另一维度进行缩放，图片的显示效果相对较好）
```
<img src="img1.jpg" width="300" height="200"/>
```
这一方法理论上同样适用于将N张图片并排显示，~~但是不用想也知道效果不好~~
如果需要将多张图片分行显示的话，相应的调整width即可