这是一篇用于验证「图片宽度排版」模块的测试文章。所有配图来自本地图库，通过图片的 alt 后缀控制显示宽度。下面按功能分组逐一演示。
一、全宽图片（100）
alt 后缀写 -100，图片占满正文宽度。适合横幅、封面类大图。
二、等高画廊（纯图段落自动成墙）
下面这个段落里只有图片、没有文字，模块会自动把它包成 flex 画廊容器 —— 无论各图原始尺寸差多少，同一行永远等高对齐。
三、四档并排（25 × 4）
四、文字环绕（left / right 浮动）
这张图片的 alt 后缀是 -33 left，图片占 33% 宽度并向左浮动，右侧的文字会自动环绕在图片旁边。这是图文混排的经典排版方式，适合人物介绍、产品说明等场景。文字长度足够时才能真正看出环绕效果，所以这里特意写长一些。
这一张用的是 -33 right，图片向右浮动，文字环绕在左侧。左右浮动成对使用时，可以让一篇文章的图文节奏更自然，避免所有图片都挤在同一侧。同样地，这里保留足够长度的文字以验证环绕是否正常。
五、半宽图片（50）
alt 后缀 -50，占正文宽度的一半，居中显示（无浮动时默认左对齐占位）。
六、小尺寸（20 / 25）
（这两张分别是 20% 与 25%。注意它们在同一段落里且有文字，所以走 float 布局而非画廊。）
七、密集墙（图越多越好看）
密集墙是这个模块最能出效果的地方。每个段落里只有图片、没有文字，模块会把整段包成 flex 画廊 —— 同一行的图片永远等高对齐，不管原图的宽高比差多少（横图、竖图、方图混在一起也不交错、不留白缝）。
7.1 两图一行 × 6 行（每张 50%）
两列是最稳的墙型：图片大、细节清楚，适合作品集、图集、相册。
7.2 三图一行 × 4 行（每张 33%）
三列是信息密度与可读性的平衡点，最常见的图墙比例。注意每行三张图的原始尺寸都不同，但渲染后高度完全一致。
7.3 五图一行 × 2 行（每张 20%）—— 最密
五列已经非常密了，适合缩略图总览、素材索引。这个密度下如果各图不等高，视觉会立刻碎掉 —— 也正是 flex 画廊相对 float 的优势所在。
技巧：墙里的图不需要写成同一档位也能混排，比如一行里放 -33 和 -25，模块会按各自宽度占比排布，宽度不整齐但高度依然对齐。想追求整齐就统一档位，想追求节奏就混着用。
7.4 无缝贴边墙（末位加 0）
深色主题下，默认的 8px 间隙会露出页面底色，看起来像一道道黑缝。这时在 alt 末尾再加一个 0（如 风景-33 0），整段就会升级成无缝贴边墙 —— 间隙归零、图与图直接拼成整面。
7.4.1 三列无缝 × 4 行
7.4.2 五列无缝 × 2 行（最密）
对比：7.2 / 7.3 的墙带 8px 间隙，适合需要「分清每张图」的场景；7.4 的墙间隙归零，适合作品集、截图墙、素材总览 —— 视觉上更整齐，也更像一个整体。两种可以混用：同一篇文章里按段落分别用 -33 和 -33 0 即可。
7.5 组合行（不等宽混排）
上面的墙都是等宽的。真正灵活的排版是不等宽组合 —— 一行里几张图各占不同比例，比如「左边两张 25%、右边一张 50%」。写法很简单：把不同档位的图放进同一个段落即可，模块会自动按各自占比排布。
7.5.1 25 + 25 + 50（两窄一宽）
两张窄图并排在左、一张宽图在右。适合「两个细节 + 一个全景」的叙述。
7.5.2 50 + 25 + 25（一宽两窄）
把上一组左右对调。主图在左、两个细节在右，视觉重心不同，节奏也不同。
7.5.3 75 + 25（主图 + 配图）
主图占绝大部分，右侧一张小图做补充说明。这里主图用的是超宽横幅（比例约 2.7:1）。
7.5.4 33 + 33 + 33（方图等分）
等宽时高度天然一致。这一组特意用方图，方方正正、最适合做产品图或头像墙。
7.5.5 宽幅三连（超宽图各自一行）
超宽横幅（2.7:1）单独成行时视觉冲击最强，适合做章节分隔或氛围图。
⚠️ 一个关键规律：同一行里若各图宽高比不同，它们的高度就不会一样 —— 这是几何决定的，不是 bug。想让混排行做到「严丝合缝、上下齐平」，素材宽高比必须满足：
宽格比例 ÷ 窄格比例 = 宽格宽度 ÷ 窄格宽度
例：25+25+50 时宽度比约 2:1，所以窄格该放竖图、宽格放横图。本节 7.5.1 能排得如此齐平，就是因为窄格用的是 0.87 竖图、宽格用的是 1.78 横图。如果反过来（窄格也放横图），就会出现「小图矮一截」的落差 —— 这是正常现象，不是出错。
7.6 全写法速查（所有排版方式一览）
本节把图片排版模块支持的全部写法各示范一遍：6 个宽度档位、左右浮动、普通画廊、无缝贴边墙、不等宽混排。可以当「速查手册」用 —— 想要哪种效果，就照着对应小节写 alt。
7.6.1 全宽（-100）
写 -100 即占满正文宽度。适合全景图、封面图、章节分隔。
7.6.2 两分（-50 + -50）
两张各占一半，并排一行，高度自动一致。
7.6.3 三分（-33 ×3）
三张等分一行，这是最常用的画廊节奏。
7.6.4 四分（-25 ×4）
7.6.5 五分（-20 ×5，最密等分行）
-20 是最小档位，一行最多五张 —— 图多时最有「照片墙」的密度感。
7.6.6 主次行（-75 + -25 / -25 + -75）
一大一小两种方向：主图在左、主图在右，节奏完全不同。
7.6.7 混排三连（-25 + -50 + -25）
窄-宽-窄的「对称构图」，适合中间放主图的场景。
7.6.8 左浮动（-33 left，图文混排）
同一段落里图片带 left 方向时，模块保留文字绕排：图片浮在左侧，文字从右侧绕过去。这种写法适合「配图 + 长解说」的场景，比如人物介绍、物品说明。注意浮动图必须和文字在同一个段落里 —— 分成两个段落就不会绕排了，而是各自独立成块。绕排会在段落结束时自动清除，不会影响下一段。
7.6.9 右浮动（-50 right，图文混排）
把方向写成 right 就是右浮动：图片占右侧一半宽，文字在左边流动。右浮动的视觉动线是「先图后文」，适合把重点图放在视觉入口的情况。浮动图与文字的间距由主题统一控制，不需要手写 margin。移动端窄屏下浮动会自动取消、图片恢复整宽，避免文字被挤成细条。
7.6.10 普通画廊墙（带间隙）
同段落多张 -33，自动排成等高画廊，图片之间保留后台设置的间距（默认 8px）。
7.6.11 无缝贴边墙（-33 0）
在档位后面再加一个 0（如 风景-33 0），所在段落升级为无缝贴边墙：水平间隙归零、纵向只留 2px 细缝，深色主题下不再露黑底。
7.6.12 写法速查表
宽度档位：-20 / -25 / -33 / -50 / -75 / -100（占位越小一行能排的图越多）
浮动环绕：档位后加 left 或 right，如 人物-33 left
无缝贴边：档位后加 0，如 风景-33 0（与 left/right 互斥）
混排组合：把不同档位写进同一段落，如 25 + 50 + 25
等高画廊：同一段落只放图不放字，行内高度自动一致
对齐方式：混排行的对齐在后台「图片宽度排版 → 混排对齐方式」里全局设置
7.7 整面密集墙（六档位全组合 + 纵向叠放 · 每行恰好 100%）
八、边界情况（不应被处理）
下面第一张图 alt 没有后缀，第二张 alt 后缀是 -45（不在合法档位）。两者都不应产生任何排版 class，按原图尺寸显示。
结语
如果以上各分组的排版都符合预期 —— 全宽撑满、画廊等高、四图并排、文字环绕、半宽居中、小图并置，且第八组的两张图保持原始尺寸不变形 —— 说明「图片宽度排版」模块工作正常。
暂无评论内容