Markdown 图片画廊与排版 - KLucenの启示录

图片网格（画廊）#

效果（点击任一图片可放大浏览）

源码（容器名与花括号紧贴）

1
:::grid{columns="3" aspect="16/9" fit="cover"}
2
![示例图一](https://pics.klucen.cn/GEM/GEM10.jpg "演唱会门票")
3
![示例图二](https://pics.klucen.cn/cuc/cuc1.jpg "开学典礼现场")
4
![示例图三](https://pics.klucen.cn/cuc/cuc2.jpg "彩带瞬间")
5
:::

参数	取值	默认	说明
`columns`	整数 1–6（文档示例用 2/3/4）	`3`	列数，移动端自动退化
`aspect`	正数比值 `W/H`，如 `16/9`、`4/3`、`1/1`	`16/10`	每格固定比例
`fit`	`cover` / `contain`	`cover`	填充裁剪或完整包含

两列与 4:3#

效果

源码

1
:::grid{columns="2" aspect="4/3" fit="cover"}
2
![示例图四](https://pics.klucen.cn/cuc/cuc1.jpg "两列 · 4:3")
3
![示例图五](https://pics.klucen.cn/cuc/cuc2.jpg "两列 · 4:3")
4
:::

单图宽度与图题#

效果：普通 Markdown 图片在 alt 文本里写 w-N% 控制宽度（不写则为原始尺寸），图片语法里的 "标题" 会渲染成图片下方的图题。

源码

1
![半宽图片 w-40%](https://pics.klucen.cn/GEM/GEM10.jpg "宽度 40% 且带图题的图片")
2

3
![带图题但未指定宽度](https://pics.klucen.cn/cuc/cuc2.jpg "只有图题，没有宽度标记")

写法	效果
`![说明 w-60%](src "图题")`	宽度限制为父容器的 60% 并居中，图题显示在图片下方
`![说明](src "图题")`	保持原始尺寸，只显示图题
非法的宽度标记（如 `w-200%`）	不生效，标记原样留在 alt 文本里

说明#

宽度标记的有效范围是 w-1% 到 w-100%，写在 alt 文本里（不是独立属性语法）；
图集容器至少需要一张 Markdown 图片，非图片子节点不会成为画廊项；
点击图片会走站的灯箱（Fancybox）查看原始大图，所以列表里用压缩过的图、灯箱看大图是推荐做法。

KLucenの启示录

图片网格（画廊）#

两列与 4:3#

单图宽度与图题#

说明#

Shirone 写作语法演示

继续阅读

换条路线

评论

KLucenの启示录

图片网格（画廊）#

两列与 4:3#

单图宽度与图题#

说明#

分享文章

沿着主题读

换条路线

评论