图片画廊与排版

Shirone 提供了强大的多列图片画廊网格与单图尺寸排版控制能力，支持 Lightbox 放大预览与 WebP 自动压缩。

图片网格画廊（grid）#

使用 ::: grid 容器将多张图片自动编排为响应式多列画廊：

1
::: grid{columns="3" aspect="16/9" fit="cover"}
2
![春日摄影](./spring.webp "樱花盛开")
3
![夏日海滩](./summer.webp "晴空与浪花")
4
![秋日落叶](./autumn.webp "枫叶大道")
5
:::

渲染效果：

::: grid{columns=“3” aspect=“16/9” fit=“cover”} 春日摄影夏日海滩秋日落叶 :::

点击任意一张图片即可进入 Lightbox 放大预览。

属性参数#

columns：列数，支持 2、3、4（移动端自动响应退化为单列或双列）。
aspect：固定比例，如 16/9、4/3、1/1。
fit：图片适应方式，cover（填充裁剪）或 contain（完整包含）。

两列 + 完整包含的效果：

1
::: grid{columns="2" aspect="4/3" fit="contain"}
2
![春日摄影](./spring.webp "樱花盛开")
3
![夏日海滩](./summer.webp "晴空与浪花")
4
:::

::: grid{columns=“2” aspect=“4/3” fit=“contain”} 春日摄影夏日海滩 :::

cover 会裁掉超出比例的部分以保持整齐，contain 则完整保留画面但可能在容器内留白。风景照适合 cover，截图与图表适合 contain。

单图尺寸与标题控制#

在普通 Markdown 图片语法的 alt 文本中直接标注宽度：

1
![架构图 w-60%](./spring.webp "系统数据流转架构图")
2

3
![图标 w-120px](./summer.webp "高清徽标")

渲染效果：

w-60%：将图片宽度限制为父容器的 60% 并水平居中。
引号中的内容自动渲染为图片下方的图题说明。

像素宽度效果：

参数对照#

写法	作用	适用场景
`w-60%`	按父容器百分比缩放	正文中的大图
`w-240px`	固定像素宽度	图标、徽标、小截图
`::: grid{columns="3"}`	三列网格	同主题组图
`::: grid{aspect="1/1" fit="cover"}`	方形裁切	头像墙、封面墙

二甲基

图片网格画廊（grid）#

属性参数#

单图尺寸与标题控制#

参数对照#

Markdown 语法

继续阅读

换条路线

评论

二甲基

图片网格画廊（grid）#

属性参数#

单图尺寸与标题控制#

参数对照#

分享文章

沿着主题读

换条路线

评论