模板:Image

来自BetaWorld 百科
[[file:]]
<img class="image" style="position:relative;z-index:-1;" src="" width="0px" />
50px 模板文档  [查看] [编辑] [历史] [刷新]

本模板用于引用图片并为其调整格式。

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

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

外框
内框

原始设计代码

<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或rad1-dt指定其他单位(如:%)。
    • rad3:相当于border-bottom-right-radius,默认值是0,默认单位是像素(px),可通过rad-dt或rad1-dt指定其他单位(如:%)。
    • rad4:相当于border-bottom-left-radius,默认值是0,默认单位是像素(px),可通过rad-dt或rad1-dt指定其他单位(如:%)。
    • radius:border-radius的默认样式,默认值是0,默认单位是像素(px),4个倒角具有相同的值,会被更详细的rad1~4的参数覆盖。
    • rad-dt:声明border-radius的单位,默认值是px,也就是rad1~4以及radius属性默认的单位,可以被更详细的rad1~4的参数覆盖。
  • 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的数字。

示例

没用,我注释了

注意事项

  • 由于移动版样式:.content a>img{max-width: 100% !important;height: auto !important;}引起的问题已修复,请不要使用div类型并在“图片”参数中以[[file:xxxxx.jpg|100px]]的方式调用图片。
  • 由于移动版lazyload插件导致的二级标题下的noscript化引起的定位失效问题已修复。
  • 由于和hover并用的时候会导致频闪,所以应当使用原始设计。