博客

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>

效果如图

注意

1. 为了能够并排显示且不影响显示效果，所要并排显示的图片最好不要过大

2. 此处仅设置了图片的宽度，如需要设置高度的话可以做如下修改,修改成自定义的高度即可（但是不推荐，只设置一个宽度或高度会等比例对另一维度进行缩放，图片的显示效果相对较好）

   <img src="img1.jpg" width="300" height="200"/>
   

3. 这一方法理论上同样适用于将N张图片并排显示，
   
   但是不用想也知道效果不好
   

4. 如果需要将多张图片分行显示的话，相应的调整width即可