查看“模板:Image/doc”的源代码

{{FromOther/CN|site=萌娘百科|originURL=https://zh.moegirl.org.cn/{{FULLPAGENAMEE}}|origin={{FULLPAGENAME}}|copyright=cc|lsubtype=by-nc-sa|lver=3.0|contribURL=https://zh.moegirl.org.cn/index.php?title={{FULLPAGENAMEE}}&action=history}}
本模板用于引用图片并为其调整格式。如需简单快速地裁剪图片，可以使用{{tl|fit-image}}模板。需要快捷调用雪碧图可以使用{{tl|sprites}}模板。

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

嗯，你没看错，里面的叫外框，外面的叫内框，因为这是裁剪，所以内框比外框大。模板属性参数的数值大部分都可以是负数<del>，至于负数是什么意思，自己考虑</del>。
<div style="height:100px;width:150px;border:1px solid #000;background-color:orange;"><div style="margin:9px;height:80px;width:130px;border:1px solid #000;background-color:skyblue;">外框</div></div>内框
==相关应用==
您可以通过以下实际例子来获得更多信息：{{tl|侵略乌贼娘}}、{{tl|一起一起这里那里}}、{{tl|请问您今天要来点兔子吗}}、{{tl|我的青春恋爱物语果然有问题}}、{{tl|电器街的漫画店}}、{{tl|路人女主的养成方法}}、{{tl|灵感!}}、{{tl|粗点心战争}}、{{tl|NEW GAME}}、{{tl|向阳素描}}、{{tl|带着智能手机闯荡异世界}}、{{tl|雏逻辑来自幸运逻辑}}

== 原始设计代码==
<pre>
<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>
</pre>
== 参数说明 ==
*括号内的英文表示这个参数名的别称。
*显示类型(display)：决定最外层的display类型，默认block。[http://www.w3school.com.cn/cssref/pr_class_display.asp 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的时候才有用。{{color|red|注意：不要和“纵”属性一起使用。}}
*链接：在描述框内添加一个链接，链接到图片地址，{{color|red|不支持外链}}。该属性只决定显示的文本，链接将会自动补充。
*link：给图片增加一个来自萌百站内链接，{{color|red|不支持外链}}。
*图片(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。会被更详细的左模糊、上模糊、右模糊、下模糊参数覆盖。
**阴影色：规定阴影的颜色，无默认值。会被更详细的左阴影色、上阴影色、右阴影色、下阴影色参数覆盖。
**阴影模式：规定阴影的模式，默认值是内切。
*注意：{{color|red|以下参数的单位是像素（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重设图片的实际缩放大小。{{color|red|这点很重要。}}
*左(clip-l)：决定从图片外框左侧到内框左侧裁剪掉的距离，默认0。
*上(clip-t)：决定从图片外框上侧到内框上侧裁剪掉的距离，默认0。
*右(clip-r)：决定从图片外框右侧到内框右侧裁剪掉的距离，默认0。
*下(clip-b)：决定从图片外框下侧到内框下侧裁剪掉的距离，默认0。
*横(h)：决定图片外框整体横轴偏移距离，默认0。
*纵(v)：决定图片外框整体竖轴偏移距离，默认0。
*样式(style)：向图片的最外层div添加样式，默认样式为：<code>display:inline-block; width:对应参数值; height:对应参数值; position:relative;</code>，若没有特殊要求，请不要覆盖这些值。
*注意：以下参数是为了简化书写的特殊效果参数。
*iflink：用来检测在某个特定页面的某些特定效果，目前只支持偏移，不能重设裁剪的大小。有效值为萌百已存页面，需要注意的是不同的名字空间的同名页面视为相同页面。同时，将为图片添加指向该参数页面的链接，由该参数设置的链接可以被link参数覆盖，当link参数为<code>null</code>时，取消图片的链接。
**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属性来设定偏移了。
*如：<nowiki>……|resize=100|宽=100|高=100|x={{#expr:100*0}}|y={{#expr:120*3}}……</nowiki>
*这就相当于在一张大图中，将宽度缩放为100px大小，高度同比例缩放。实际显示大小为100x100px（宽*高）大小的格子。将大图裁剪为每一格为100x120px（x*y）大小的格子。这个模板显示为第1行（100*0），第4列的格子（120*3）。
*{{tl|缩放计算}}输入原宽、原高以及目标高、按比例缩放输出目标宽，返回值是一个不带px的数字。

== 示例 ==
<pre>
{{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|描述=风灵使薇茵}}
</pre>
{{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|描述=风灵使薇茵}}

<div>
说明：
*在使用外链的时候，种类=outer是必要参数。
#这是原始图片的缩放用法，宽度和高度需要自己指定，并不会自动调整，没那么高级。
#这是基础位移的用法。右边的空白部分是由于空间占用250px的宽度，图片显示为250px，并且用x指定了20px的偏移（向左20px）但宽度不变，剩下的空间就是没有图片显示的部分，也就是空白了。而横纵则是无视空间大小的整体偏移，但请注意，横纵属性是有可能会覆盖其它文本的。
#这是基础裁剪用法，简单的指定上下左右的距离裁剪掉对应的尺寸，不用自己计算占用空间大小。
#这是基础缩放和裁剪的混合用法。缩放都是通过指定宽度完成的。需要的注意的是，原本这里的宽是500px高是250px，但因为通过左125px右125px合计裁剪250px，所以宽度最后就只有250px了。而上150px下-150px合计裁剪0px，所以高度没有变化，但是相当于是使用了y=150了。当符号相反时，左右的和值就相当于是x的值，上下的和值就相当于是y的值，当然这些参数也可以同时使用。<br />radius裁剪容器的四角，最后会形成一个圆角矩形，当用到的雪碧图有背景颜色时，可以根据内部小图片的形状设置此参数用以裁剪掉背景颜色，或是可以将一个正方形容器的radius设置为容器大小的一半，形成一个圆形（当然最好要将这些在制作雪碧图时全部做好，而不是依靠radius参数）。
#这是Sprites兼容模式，可以直接指定占用空间大小，在对图片指定位移。这是先指定大小再指定偏移的做法，道理是一样的。但width和h宽，高=height是冲突的，不能同时使用，并且应该使用resize去指定图片的缩放大小。
</div>

<pre>
{{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%)}}
</pre>
{{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的一下，是语法糖的魔术。
*使用特殊的网格做点阵效果。
<pre>
{{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>}}
</pre>
{{image|显示类型=inline-block|图片=Polarisation_(Circular).svg|种类=tall|宽=250|高=400|描述=说明|链接=原图}}
{{image|显示类型=inline-block|图片=QingMingShangHeTu Big.jpg|种类=wide|宽=800|resize=5000|高=155|文本高=-40|描述=<div style="font-size:150%;text-align:center;">清明上河图</div>}}
<div>
说明：
*显示类型不一定要指定，这里是为了放在一行里而写的。虽然也支持裁剪和位移的参数，但不建议使用。
#种类=tall是必要参数。
#种类=wide是必要参数。注意，这里的resize是为了覆盖宽对图片的缩放指定，这个指定很重要。
</div>
<pre>
{{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>}}
</pre>
{{image|显示类型=inline-block|种类=tall|段落=div|图片=<div style="background-color:#ccc;">
从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。
</div>|宽=250|高=300|描述=段落文本框的使用，来源：{{tl|image}}}}
{{image|显示类型=inline-block|种类=wide|段落=div|图片=<div style="background-color:#ccc;width:800px;">
从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。从这里开始可以实现显示大量的文本在一个集中的小框内。
</div>|宽=350|高=300|resize=500|文本高=-40|描述=<div style="font-size:150%;text-align:center;">正常人一般来说都是不会这么用的！</div>}}
<div>
说明：
*显示类型不一定要指定，这里是为了放在一行里而写的。虽然也支持裁剪和位移的参数，但不建议使用。
#种类=tall，段落=div是必要参数。
#种类=wide，段落=div是必要参数。注意，这里的resize是为了指定容器的宽度，而容器内的成员的宽度需要重新指定，这两个指定很重要。此外，宽度段落的设定会使得高度段落的谁的设定失效，所以这个模式其实平时没什么用，只有在你竖版排列的时候才可能有用。
</div>

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

{{图像模板}}
<includeonly>
<!-- 本行下加入模板的分類 -->
[[Category:图像模板]][[Category:需要Android客户端进行适配的模板]]
</includeonly>
<noinclude>[[Category:模板说明文件]]</noinclude>