图片网格画廊用于在一篇文章里展示多张相关图片。它通过 :::grid 容器指令声明,把普通 Markdown 图片排成响应式网格,并为同一个网格内的图片建立独立的 Fancybox 灯箱分组。

这适合放文章截图、作品预览、旅行照片精选、设备细节对比,或任何需要“一组图片一起浏览”的内容。普通文章图片仍然可以单独书写;只有放进 :::grid 的图片才会按网格方式渲染。

基础写法#

:::grid 和结束标记 ::: 之间直接写 Markdown 图片。每张图片建议单独成段,并用空行分隔:

:::grid
![第一张图片说明](/images/demos/image-grid-demo/landscape-1.webp)
![第二张图片说明](/images/demos/image-grid-demo/landscape-2.webp)
:::

默认配置是三列、16/10 展示比例、cover 裁剪方式。

默认网格的第一张横图
默认网格的第一张横图
默认网格的第二张横图
默认网格的第二张横图
默认网格的第三张横图
默认网格的第三张横图

参数#

参数写在开始标记后面的花括号中:

:::grid{columns="3" aspect="16/9" fit="cover"}
参数可用值默认值作用
columns16 的整数3桌面端每行列数。
aspect正数比例,例如 16/93/41/116/10图片卡片的展示比例。
fitcovercontaincover图片填充方式。

columns 超出范围时会回落到三列;aspect 不是合法比例时会回落到 16/10fit 除了 contain 以外都会当作 cover

标题和替代文本#

图片的 alt 文本会作为无障碍替代文本,也会作为默认图注。如果 Markdown 图片带有可选 title,则 title 优先作为图注:

![用于无障碍的说明](/images/demos/image-grid-demo/square-1.webp "显示在图片下方的图注")
这张图片没有 title,因此 alt 会显示为图注
这张图片没有 title,因此 alt 会显示为图注
第二张方图的无障碍说明
这段 title 会显示为图注
第三张方图的无障碍说明
较长图注会自动换行,并保持卡片底部对齐

裁剪方式#

fit="cover" 会从中心裁剪图片,让同一组卡片保持整齐,适合封面、缩略图和视觉预览。

cover 裁剪示例一
cover:填满卡片
cover 裁剪示例二
cover:中心裁剪
cover 裁剪示例三
cover:统一版式

fit="contain" 会完整保留原图。图片比例和卡片比例不一致时,卡片里可能出现留白;这适合截图、海报、透明图或边缘信息不能被裁掉的图片。

contain 示例一
contain:保留完整原图
contain 示例二
contain:允许留白
contain 示例三
contain:适合边缘信息重要的图片

常见比例#

方图适合头像、图标、局部细节和作品缩略图:

方图示例一
方图示例一
方图示例二
方图示例二
方图示例三
方图示例三

3/4 适合海报、人物、手机截图和竖向作品:

竖图示例一
竖图示例一
竖图示例二
竖图示例二
竖图示例三
竖图示例三

单列适合需要更大阅读尺寸的图片:

单列详情图
单列详情图

响应式和灯箱#

桌面端会按照 columns 展示;窄屏下最多两列;手机宽度会收敛为单列。这样同一段 Markdown 不需要为移动端再写一套图片结构。

点击任意网格图片会打开 Fancybox。每个 :::grid 都有自己的分组:在一个网格里打开图片时,只会浏览同一组内的图片,不会混入文章中的普通图片或其他网格。

如果图片边缘有重要文字、截图按钮或透明区域,优先使用 fit="contain",或者把 aspect 调整到接近原图比例。需要整齐的卡片视觉时,保留默认的 cover 即可。