Markdown 图片并排的最佳实践
传统方法
1 |  |  |
效果:
![]() |
![]() |
---|
传统方法有个问题如下:
1 |  |  |
问题:
![]() |
![]() |
---|
长图一 alt 与短图二 alt 在表格中使两图片大小不一致。
最佳实践
1 | <div style="text-align:center"> |
效果:
如果要多张(超过两张)图片并排,修改上方代码中第 3 和第 9 行代码的 width
属性,小于 即可。
长图宽度减少一半显示
有时候我们需要展示长图,比如手机整屏截屏,这时由于图片长度太大影响阅读体验,我们可以把图片宽度减少 50% 显示。方法如上,如法炮制。
1 | <div style="text-align:center"> |
效果:
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 | {% gallery %} |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 CasecoRI & 小破站!
评论
GiscusTwikoo