Skip to content

示例库

本页截图与代码均来自随插件发布的演示库,可直接打开对照。

下载中文演示库

宽度路由 ​

单图的宽度不是固定的:比例越宽,占的栏宽越多;超过浮动阈值就改为居中,不超过就靠边让文字绕排。

四档比例 ​

先看两张宽的:

markdown
![21:9](assets/ratio/ratio-21x9.svg)
![16:9](assets/ratio/ratio-16x9.svg)
21:9 占栏宽 75% 居中,16:9 占 60% 也居中

21:9 的宽图占栏宽 75%(760px 栏宽下 569px),因为超过浮动阈值,改为居中显示。16:9 占 60%(458px),同样居中;它正好压在阈值上,再窄一点就会开始浮动。

再看两张窄的:

markdown
![1:1](assets/ratio/ratio-1x1.svg)
![9:16](assets/ratio/ratio-9x16.svg)
1:1 方图占 40% 靠左浮动,9:16 竖图占 28% 靠右浮动

方图占 39%(297px),宽度在阈值以下,于是靠左浮动,右侧预留空间给正文。9:16 只剩 28%(213px),替换为靠右浮动。左右轮替由模板的浮动方向决定,不是随机分配。

曲线的来源 ​

宽度百分比是比例 r(宽 ÷ 高)的分段幂函数。中位比例默认 1.5;也就是 3:2 的横图刚好占一半栏宽;比例往两端走,宽度按幂次逼近上下限。

两个设置项整体平移这条曲线:

设置项默认作用
栏宽增益50(中性)越大,宽图更宽、窄图更窄
中位比例1.5把哪个比例定为 50% 栏宽

想彻底换一条曲线,用模板规则覆盖。

不适用曲线的条件 ​

条件结果
写了 ag:width直接用这个百分比,不再计算
计算宽度 > floatMax(默认 60%)改为居中块,不浮动
栏宽 < mobileBreakpoint(默认 600px)一律居中块,不浮动
图片在画廊里走行切分,不看这条曲线

实际影响 ​

裁剪会改变比例,因此也改变宽度:一张 16:9 的宽图裁成 1:1,会自动从接近满栏收窄到一半左右。这是预期行为,不是 bug;详见裁剪与取景。

下一步 ​

相关阅读 ​