传统方法

1
2
![图一](/img/img-1.webp) | ![图二](/img/img-2.webp)
---|---

效果：

图一 图二

传统方法有个问题如下：

1
2
![长图一 alt](/img/img-1.webp) | ![图二](/img/img-2.webp)
---|---

问题：

长图一 alt 图二

长图一 alt 与短图二 alt 在表格中使两图片大小不一致。

最佳实践

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div style="text-align:center">

<span style="width:47%;display:inline-block">

![长图一 alt](/img/img-1.webp)

</span>

<span style="width:47%;display:inline-block">

![图二](/img/img-2.webp)

</span>

</div>

效果：

长图一 alt

图二

如果要多张（超过两张）图片并排，修改上方代码中第 3 和第 9 行代码的 width 属性，小于 1并排图片张数×100%\frac1{\mathrm{并排图片张数}}\times100\% 即可。

长图宽度减少一半显示

有时候我们需要展示长图，比如手机整屏截屏，这时由于图片长度太大影响阅读体验，我们可以把图片宽度减少 50% 显示。方法如上，如法炮制。

1
2
3
4
5
6
7
8
9
<div style="text-align:center">

<span style="width:50%;display:inline-block">

![长图](/img/img-3.webp)

</span>

</div>

效果：

长图

Typecho 下并排图片

经测试，以上方式在 Hexo 的 Markdown 渲染器下表现最完美，但放入 Typecho 使用，还需要做一点修改，那就是把图片换为 <img> 这样的 HTML 标签：

1
<div style="text-align:center"><img src="https://cdn.casecori.top/gh/cystee/om/周日视差.png" alt="周日视差" title="周日视差" style="width:38%;display:inline-block"><img src="https://cdn.casecori.top/gh/cystee/om/周年视差.png" alt="周年视差" title="周年视差" style="width:60%;display:inline-block"></div>

Butterfly 主题图片并排

如果你用的 Hexo 主题 Butterfly，那并排图片就很简单了：

1
2
3
4
5
6
7
8
9
{% gallery %}
![](/img/chatgpt-2.webp)
![](/img/chatgpt-3.webp)
![](/img/chatgpt-4.webp)
![](/img/chatgpt-5.webp)
![](/img/chatgpt-6.webp)
![](/img/chatgpt-7.webp)
![](/img/chatgpt-8.webp)
{% endgallery %}