传统方法

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

效果：

传统方法有个问题如下：

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

问题：

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

最佳实践

<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>

效果：

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

长图宽度减少一半显示

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

<div style="text-align:center">

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

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

</span>

</div>

效果：