You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

MediaWiki模板:如何让图标随文本大小缩放(无需自定义CSS)

在MediaWiki中实现随文本缩放的图标模板(无需自定义CSS)

MediaWiki默认的文件引用语法确实只支持px作为尺寸单位,但不用自定义CSS也有几种方法实现图标随文本缩放的需求:

方法1:行内样式实现自动缩放

直接用HTML<span>包裹图片,通过行内样式设置图标高度为1em(与当前文本字号绑定),同时对齐文本:

<span style="display: inline-block; vertical-align: middle; height: 1em; width: auto;">
[[File:Icon.png|frameless|link=]]
</span>
  • 说明:height:1em会让图标高度自动匹配所在位置的文本字号,vertical-align:middle确保图标和文本垂直对齐,link=去掉图片默认的文件页面链接避免干扰。大部分现代MediaWiki版本都支持这种写法。

方法2:模板参数手动适配尺寸

给模板添加可选的尺寸参数,在不同场景(如标题、正文)手动传入对应px值:
模板代码:

{{#if: {{{size|}}}
 | [[File:Icon.png|frameless|{{{size}}}]]
 | [[File:Icon.png|frameless|20px]]
}}
  • 使用示例:
    • 正文里用:{{IconTemplate}}(默认20px)
    • 标题里用:{{IconTemplate|size=30px}}(手动指定大尺寸)
      这种方法兼容性最好,适合所有MediaWiki版本。

方法3:上下文判断半自动适配

通过模板参数标记使用场景,自动切换尺寸:
模板代码:

{{#ifeq: {{{context|}}} | heading
 | [[File:Icon.png|frameless|30px]]
 | [[File:Icon.png|frameless|20px]]
}}
  • 使用示例:
    • 标题中:{{IconTemplate|context=heading}}
    • 正文中:{{IconTemplate}}

内容的提问来源于stack exchange,提问作者awe

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.28 02:05:10