模板:Image
模板文档 |
本页面之全部或部分原来自萌娘百科的模板:Image，依 CC BY-NC-SA 3.0 CN 授权引入；原贡献者可以在这里看到。 |
本模板用于引用图片并为其调整格式。如需简单快速地裁剪图片，可以使用{{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|图片=Wynn_the_Wind_Charmer.jpg|宽=250|高=250|种类=box|文本高=25|描述=风灵使薇茵|link=风灵使 薇茵}}
{{image|显示类型=inline-block|图片=Wynn_the_Wind_Charmer.jpg|宽=250|高=250|x=20|y=-100|纵=20}}
{{image|显示类型=inline-block|图片=Wynn_the_Wind_Charmer.jpg|宽=250|高=250|上=20|左=50|下=30|右=85}}
{{image|显示类型=inline-block|图片=Wynn_the_Wind_Charmer.jpg|宽=500|高=250|radius=30|rad1-dt=%|rad3-dt=%|左=125|右=125|上=150|下=-150}}
{{image|显示类型=inline-block|图片=Wynn_the_Wind_Charmer.jpg|width=200|height=200|resize=250|x=80|y=80|下=30|右=30|种类=box|文本高=-25|描述=风灵使薇茵}}
风灵使薇茵
风灵使薇茵
说明：
- 在使用外链的时候，种类=outer是必要参数。
- 这是原始图片的缩放用法，宽度和高度需要自己指定，并不会自动调整，没那么高级。
- 这是基础位移的用法。右边的空白部分是由于空间占用250px的宽度，图片显示为250px，并且用x指定了20px的偏移（向左20px）但宽度不变，剩下的空间就是没有图片显示的部分，也就是空白了。而横纵则是无视空间大小的整体偏移，但请注意，横纵属性是有可能会覆盖其它文本的。
- 这是基础裁剪用法，简单的指定上下左右的距离裁剪掉对应的尺寸，不用自己计算占用空间大小。
- 这是基础缩放和裁剪的混合用法。缩放都是通过指定宽度完成的。需要的注意的是，原本这里的宽是500px高是250px，但因为通过左125px右125px合计裁剪250px，所以宽度最后就只有250px了。而上150px下-150px合计裁剪0px，所以高度没有变化，但是相当于是使用了y=150了。当符号相反时，左右的和值就相当于是x的值，上下的和值就相当于是y的值，当然这些参数也可以同时使用。
radius裁剪容器的四角，最后会形成一个圆角矩形，当用到的雪碧图有背景颜色时，可以根据内部小图片的形状设置此参数用以裁剪掉背景颜色，或是可以将一个正方形容器的radius设置为容器大小的一半，形成一个圆形（当然最好要将这些在制作雪碧图时全部做好，而不是依靠radius参数）。 - 这是Sprites兼容模式，可以直接指定占用空间大小，在对图片指定位移。这是先指定大小再指定偏移的做法，道理是一样的。但width和h宽，高=height是冲突的，不能同时使用，并且应该使用resize去指定图片的缩放大小。
{{image|显示类型=inline-block|图片=Wynn_the_Wind_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}
{{image|显示类型=inline-block|图片=Wynn_the_Wind_Charmer.jpg|宽=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%)}}
说明
- 使用内切阴影来获得半透明的相册边框效果，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>}}
说明
清明上河图
说明：
- 显示类型不一定要指定，这里是为了放在一行里而写的。虽然也支持裁剪和位移的参数，但不建议使用。
- 种类=tall是必要参数。
- 种类=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>}}
段落文本框的使用，来源：{{image}}
正常人一般来说都是不会这么用的！
说明：
- 显示类型不一定要指定，这里是为了放在一行里而写的。虽然也支持裁剪和位移的参数，但不建议使用。
- 种类=tall，段落=div是必要参数。
- 种类=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并用的时候会导致频闪，所以应当使用原始设计。
| ||||||||||||||||||||||||||||
.svg){kind=link}