传统方法

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>

效果:

长图