本WIKI于2020.07.21由往事仇心创建,2021.12.25正式建组“空桑档案馆”,编辑权限逐步开放,建议各位少主收藏。
目前正在搭建基础框架与美工优化,欢迎翻阅已开放区域,并提出宝贵建议。
“空桑档案馆”搭建组持续招募ing,期待更多能人异士参与食物语WIKI建设。
反馈留言  ·  编辑教程  ·  收藏方法  ·  

全站通知:

模板:Image/文档

来自食物语-档案馆WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

本模板用于引用图片并为其调整格式。如需简单快速地裁剪图片,可以使用{{fit-image}}模板。需要快捷调用雪碧图可以使用{{sprites}}模板。

橙色部分是整张图片(img标签),天蓝色部分(上一级div标签)是实际显示部分和占用空间。

嗯,你没看错,里面的叫外框,外面的叫内框,因为这是裁剪,所以内框比外框大。模板属性参数的数值大部分都可以是负数,至于负数是什么意思,自己考虑

外框

内框

相关应用

您可以通过以下实际例子来获得更多信息:{{侵略乌贼娘}}、{{一起一起这里那里}}、{{请问您今天要来点兔子吗}}、{{我的青春恋爱物语果然有问题}}、{{电器街的漫画店}}、{{路人女主的养成方法}}、{{灵感!}}、{{粗点心战争}}、{{NEW GAME}}、{{向阳素描}}、{{带着智能手机闯荡异世界}}、{{雏逻辑来自幸运逻辑}}

原始设计代码

<div style="position:relative;display:inline-block;">
<div style="position:absolute;top:0;left0;max-width:1000px !important;width:260px;height:430px;overflow:hidden;"> 		
<img src="{{filepath: 千恋万花_从雨A01_害羞.png}}" width="480px" style="position:absolute;left:-130px;top:-130px;"/> 	
</div>
</div>

参数说明

  • 括号内的英文表示这个参数名的别称。
  • 显示类型(display):决定最外层的display类型,默认block。CSS display 属性
  • 种类(type):模板调用种类,默认值是无。有效参数是tall、wide、box、outer、div五种。tall和wide是针对宽或高太大,以防溢出而做的滚动条处理,可以配合裁剪相关参数一起使用。outer是支持外链。box纯粹是为了让你添加一个文字说明用的(基本无用)。div允许在图片属性中使用html标签构造图片或者其他元素,自由度更广。
  • 段落(phase):默认值是无,有效参数是div。对文本框进行兼容,可以使大段文本内容以滚动条的形式呈现在文档内。
  • 描述:添加文字,默认值是“图片说明”,会在最外层添加一个边框为1像素大小的实线灰色#ccc的边框。当“种类”的属性值为box、outer、tall、wide的时候才有用。
  • 文本高:决定“描述”属性的文字的生成位置与高度,正数生成于图片底端,负数生成于图片上侧。单位是像素(px)。默认为生成于底端的25px高度文本段落。当“种类”的属性值为box、outer、tall、wide的时候才有用。注意:不要和“纵”属性一起使用。
  • 链接:在描述框内添加一个链接,链接到图片地址,不支持外链。该属性只决定显示的文本,链接将会自动补充。
  • link:给图片增加一个来自萌百站内链接,不支持外链
  • 图片(pic/img):需要使用的图片的名字,默认null。外链的情况下请在种类属性中声明outer。很奇怪的默認值
  • img-css:直接声明图片本身所具有的样式。(如无特殊情况,一般不推荐使用)
  • pos:pos将会声明整个元素的定位行为,默认值是absolute。
    • 当pos不为absolute时,图片大小将会自动设置,但是会失去所有的定位行为、额外声明的元素大小以及溢出时的行为模式。
    • 溢出行为将会继承父级元素,也就是最外层容器的行为,如有需要可以在最外层容器使用style属性来设置溢出行为。
  • 缩略:更换引用源,使用经过压缩后的图片,对大体积的图片使用可提高速度。默认参数:否,有效参数:是。
  • rads:快速简写border-radius倒角样式,默认值0,默认没有单位,具有最高的优先级,会覆盖所有的子级参数。
    • rad1:相当于border-top-left-radius,默认值是0,默认单位是像素(px),可通过rad-dt或rad1-dt指定其他单位(如:%)。
    • rad2:相当于border-top-right-radius,默认值是0,默认单位是像素(px),可通过rad-dt或rad2-dt指定其他单位(如:%)。
    • rad3:相当于border-bottom-right-radius,默认值是0,默认单位是像素(px),可通过rad-dt或rad3-dt指定其他单位(如:%)。
    • rad4:相当于border-bottom-left-radius,默认值是0,默认单位是像素(px),可通过rad-dt或rad4-dt指定其他单位(如:%)。
    • radius:border-radius的默认样式,默认值是0,默认单位是像素(px),4个倒角具有相同的值,会被更详细的rad1~4的参数覆盖。
    • rad-dt:声明border-radius的单位,默认值是px,也就是rad1~4以及radius属性默认的单位,可以被更详细的rad1-dt~rad4-dt的参数覆盖。
  • shadow:快速简写阴影。
    • 阴影粗细:规定阴影的粗细,默认值是0,单位是px。会被更详细的左阴影粗细、上阴影粗细、右阴影粗细、下阴影粗细参数覆盖。
    • 模糊:规定阴影的模糊程度,默认值是0,单位是px。会被更详细的左模糊、上模糊、右模糊、下模糊参数覆盖。
    • 阴影色:规定阴影的颜色,无默认值。会被更详细的左阴影色、上阴影色、右阴影色、下阴影色参数覆盖。
    • 阴影模式:规定阴影的模式,默认值是内切。
  • 注意:以下参数的单位是像素(px),不需要额外声明,不支持使用百分比。
  • 宽(wd):决定图片的宽度,默认0。直接决定了图片的缩放大小以及内、外框宽度初始大小,该数值对外框宽度的影响会左、右属性被裁剪。
  • 高(ht):决定图片的高度,默认0。决定图片外框高度的初始大小,该数值对内框高度的影响会被上、下属性会被裁剪。
  • 宽高比(k):决定图片外框的宽高比,默认0,在高=0的时候才有用。高=宽*宽高比。這樣感覺很奇怪
  • width:决定外框的宽度,默认0,Sprites兼容模式。
  • height:决定外框的高度,默认0,Sprites兼容模式。
  • x:决定内框的在x轴上的偏移量,默认0,Sprites兼容模式。
  • y:决定内框的在y轴上的偏移量,默认0,Sprites兼容模式。
  • 缩放(resize):重设图片的实际缩放大小。该数值会覆盖宽属性对图片的预设缩放。Sprites兼容模式。
    • 在使用宽幅滚动条的时候,需要resize重设图片的实际缩放大小。这点很重要。
  • 左(clip-l):决定从图片外框左侧到内框左侧裁剪掉的距离,默认0。
  • 上(clip-t):决定从图片外框上侧到内框上侧裁剪掉的距离,默认0。
  • 右(clip-r):决定从图片外框右侧到内框右侧裁剪掉的距离,默认0。
  • 下(clip-b):决定从图片外框下侧到内框下侧裁剪掉的距离,默认0。
  • 横(h):决定图片外框整体横轴偏移距离,默认0。
  • 纵(v):决定图片外框整体竖轴偏移距离,默认0。
  • 样式(style):向图片的最外层div添加样式,默认样式为:display:inline-block; width:对应参数值; height:对应参数值; position:relative;,若没有特殊要求,请不要覆盖这些值。
  • 注意:以下参数是为了简化书写的特殊效果参数。
  • iflink:用来检测在某个特定页面的某些特定效果,目前只支持偏移,不能重设裁剪的大小。有效值为萌百已存页面,需要注意的是不同的名字空间的同名页面视为相同页面。同时,将为图片添加指向该参数页面的链接,由该参数设置的链接可以被link参数覆盖,当link参数为null时,取消图片的链接。
    • iflink-x:决定在iflink所声明的页面上,x参数的具体值。
    • iflink-y:决定在iflink所声明的页面上,y参数的具体值。
    • iflink-h:决定在iflink所声明的页面上,横参数的具体值。
    • iflink-v:决定在iflink所声明的页面上,纵参数的具体值。
    • iflink+x:决定在iflink所声明的页面上,x参数的值在原有基础上的偏移量。
    • iflink+y:决定在iflink所声明的页面上,y参数的值在原有基础上的偏移量。
    • iflink+h:决定在iflink所声明的页面上,横参数的值在原有基础上的偏移量。
    • iflink+v:决定在iflink所声明的页面上,纵参数的值在原有基础上的偏移量。

小技巧

  • 当你不知道一张图片大小的时候,你可以使用resize属性来强制重设它的大小。这样你就你的“宽”属性或“width”属性就是相对于resize的值了,当你使用雪碧图的时候就不需要用除法依次计算了,而可以使用x或y属性来设定偏移了。
  • 如:……|resize=100|宽=100|高=100|x={{#expr:100*0}}|y={{#expr:120*3}}……
  • 这就相当于在一张大图中,将宽度缩放为100px大小,高度同比例缩放。实际显示大小为100x100px(宽*高)大小的格子。将大图裁剪为每一格为100x120px(x*y)大小的格子。这个模板显示为第1行(100*0),第4列的格子(120*3)。
  • {{缩放计算}}输入原宽、原高以及目标高、按比例缩放输出目标宽,返回值是一个不带px的数字。

示例

{{image|显示类型=inline-block|图片=|宽=250|高=250|种类=box|文本高=25|描述=风灵使薇茵|link=风灵使 薇茵}}
{{image|显示类型=inline-block|图片=食魂·测试方形头像.png|宽=250|高=250|x=20|y=-100|纵=20}}
{{image|显示类型=inline-block|图片=食魂·测试方形头像.png|宽=250|高=250|上=20|左=50|下=30|右=85}}
{{image|显示类型=inline-block|图片=食魂·测试方形头像.png|宽=500|高=250|img-css=height:500px|radius=30|rad1-dt=%|rad3-dt=%|左=125|右=125|上=150|下=-150}}
{{image|显示类型=inline-block|图片=食魂·测试方形头像.png|width=200|height=200|resize=250|img-css=height:250px|x=80|y=80|下=30|右=30|种类=box|文本高=-25|描述=风灵使薇茵}}
食魂·测试方形头像.png
食魂·测试方形头像.png
<img class="image" style="width:250px;max-width:none;position:relative;z-index:-1;" src="https://patchwiki.biligame.com/images/swy/a/ae/duwsd392n1do47wq1f3ytjabva5chxv.png" />
食魂·测试方形头像.png
<img class="image" style="width:250px;max-width:none;position:relative;z-index:-1;" src="https://patchwiki.biligame.com/images/swy/a/ae/duwsd392n1do47wq1f3ytjabva5chxv.png" />
食魂·测试方形头像.png
<img class="image" style="width:500px;max-width:none;position:relative;z-index:-1;height:500px" src="https://patchwiki.biligame.com/images/swy/a/ae/duwsd392n1do47wq1f3ytjabva5chxv.png" />
食魂·测试方形头像.png
<img class="image" style="width:250px;max-width:none;position:relative;z-index:-1;height:250px" src="https://patchwiki.biligame.com/images/swy/a/ae/duwsd392n1do47wq1f3ytjabva5chxv.png" />
风灵使薇茵

说明:

  • 在使用外链的时候,种类=outer是必要参数。
  1. 这是原始图片的缩放用法,宽度和高度需要自己指定,并不会自动调整,没那么高级。
  2. 这是基础位移的用法。右边的空白部分是由于空间占用250px的宽度,图片显示为250px,并且用x指定了20px的偏移(向左20px)但宽度不变,剩下的空间就是没有图片显示的部分,也就是空白了。而横纵则是无视空间大小的整体偏移,但请注意,横纵属性是有可能会覆盖其它文本的。
  3. 这是基础裁剪用法,简单的指定上下左右的距离裁剪掉对应的尺寸,不用自己计算占用空间大小。
  4. 这是基础缩放和裁剪的混合用法。缩放都是通过指定宽度完成的。需要的注意的是,原本这里的宽是500px高是250px,但因为通过左125px右125px合计裁剪250px,所以宽度最后就只有250px了。而上150px下-150px合计裁剪0px,所以高度没有变化,但是相当于是使用了y=150了。当符号相反时,左右的和值就相当于是x的值,上下的和值就相当于是y的值,当然这些参数也可以同时使用。
    radius裁剪容器的四角,最后会形成一个圆角矩形,当用到的雪碧图有背景颜色时,可以根据内部小图片的形状设置此参数用以裁剪掉背景颜色,或是可以将一个正方形容器的radius设置为容器大小的一半,形成一个圆形(当然最好要将这些在制作雪碧图时全部做好,而不是依靠radius参数)。从上方裁剪时请务必在img-css参数中正确填写缩放后的完整图片大小。
  5. 这是Sprites兼容模式,可以直接指定占用空间大小,在对图片指定位移。这是先指定大小再指定偏移的做法,道理是一样的。但width和h宽,高=height是冲突的,不能同时使用,并且应该使用resize去指定图片的缩放大小。用于Sprites时请务必在img-css参数中正确填写缩放后的完整图片大小。
{{image|显示类型=inline-block|图片=食魂·测试方形头像.png|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}
{{image|显示类型=inline-block|图片=食魂·测试方形头像.png|宽=250|高=250
|背景色=linear-gradient(15deg,rgba(255,255,255,0.3) 8%,rgba(255,0,0,0.3) 10%,rgba(255,255,255,0.3) 12%,rgba(255,255,255,0.3) 36%,rgba(255,0,0,0.3) 38%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0.3) 61%,rgba(255,0,0,0.3) 63%,rgba(255,255,255,0.3) 65%,rgba(255,255,255,0.3) 88%,rgba(255,0,0,0.3) 90%,rgba(255,255,255,0.3) 92%),linear-gradient(90deg,rgba(255,255,255,0.3) 8%,rgba(255,0,0,0.3) 10%,rgba(255,255,255,0.3) 12%,rgba(255,255,255,0.3) 36%,rgba(255,0,0,0.3) 38%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0.3) 61%,rgba(255,0,0,0.3) 63%,rgba(255,255,255,0.3) 65%,rgba(255,255,255,0.3) 88%,rgba(255,0,0,0.3) 90%,rgba(255,255,255,0.3) 92%)}}
食魂·测试方形头像.png
<img class="image" style="width:250px;max-width:none;position:relative;z-index:-1;" src="https://patchwiki.biligame.com/images/swy/a/ae/duwsd392n1do47wq1f3ytjabva5chxv.png" />
食魂·测试方形头像.png
<img class="image" style="width:250px;max-width:none;position:relative;z-index:-1;" src="https://patchwiki.biligame.com/images/swy/a/ae/duwsd392n1do47wq1f3ytjabva5chxv.png" />

说明

  • 使用内切阴影来获得半透明的相册边框效果,Duang的一下,是语法糖的魔术。
  • 使用特殊的网格做点阵效果。
{{image|显示类型=inline-block|图片=Polarisation_(Circular).svg|种类=tall|宽=250|高=400|描述=说明|链接=原图}}
{{image|显示类型=inline-block|图片=QingMingShangHeTu Big.jpg|种类=wide|宽=500|resize=5000|高=155|文本高=-40|描述=<div style="font-size:150%;text-align:center;">清明上河图</div>}}
<img class="image" style="width:250px;max-width:none;position:relative;z-index:-1;" src="" />
说明
<img class="image" style="width:5000px;max-width:none;position:relative;z-index:-1;" src="" />
清明上河图

说明:

  • 显示类型不一定要指定,这里是为了放在一行里而写的。虽然也支持裁剪和位移的参数,但不建议使用。
  1. 种类=tall是必要参数。
  2. 种类=wide是必要参数。注意,这里的resize是为了覆盖宽对图片的缩放指定,这个指定很重要。
{{image|显示类型=inline-block|种类=tall|段落=div|图片=<div style="background-color:#f00;">
从这里开始可以实现显示大量的文本在一个集中的小框内。……(当有大量的文本显示不下的时候)
</div>|宽=250|高=300|描述=段落文本框的使用,来源:{{tl|image}}}}
{{image|显示类型=inline-block|种类=tall|段落=div|图片=<div style="background-color:#f00;width:800px;">
从这里开始可以实现显示大量的文本在一个集中的小框内。……(当有大量的文本显示不下的时候)
</div>|宽=350|高=300|resize=500|文本高=-40|描述=<div style="font-size:150%;text-align:center;">正常人一般来说都是不会这么用的!</div>}}
[[file:

从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。

|1px]]

从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。

段落文本框的使用,来源:{{image}}
[[file:

从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。

|1px]]

从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。

正常人一般来说都是不会这么用的!

说明:

  • 显示类型不一定要指定,这里是为了放在一行里而写的。虽然也支持裁剪和位移的参数,但不建议使用。
  1. 种类=tall,段落=div是必要参数。
  2. 种类=wide,段落=div是必要参数。注意,这里的resize是为了指定容器的宽度,而容器内的成员的宽度需要重新指定,这两个指定很重要。此外,宽度段落的设定会使得高度段落的谁的设定失效,所以这个模式其实平时没什么用,只有在你竖版排列的时候才可能有用。

注意事项

  • 本模板会大幅增加展开长度
    • 如果仅仅是为了调整图片大小,不必使用本模板,请直接用[[File:文件名|?px]],参见Help:图像
    • 如果是为了简单裁剪图片或者避免水印,可使用{{Image-clip}}。
  • 由于移动版样式:.content a>img{max-width: 100% !important;height: auto !important;}引起的问题已修复,请不要使用div类型并在“图片”参数中以[[file:xxxxx.jpg|100px]]的方式调用图片。
  • 由于移动版lazyload插件导致的二级标题下的noscript化引起的定位失效问题已修复。
  • 由于和hover并用的时候会导致频闪,所以应当使用原始设计。

模板:图像模板