模板:Image
跳至導覽
跳至搜尋
內框
模板文檔本模板用於引用圖片並為其調整格式。如需簡單快速地裁剪圖片，可以使用{{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|img-css=height:500px|radius=30|rad1-dt=%|rad3-dt=%|左=125|右=125|上=150|下=-150}}
{{image|显示类型=inline-block|图片=Wynn_the_Wind_Charmer.jpg|width=200|height=200|resize=250|img-css=height:250px|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參數）。從上方裁剪時請務必在img-css參數中正確填寫縮放後的完整圖片大小。 - 這是Sprites兼容模式，可以直接指定占用空間大小，在對圖片指定位移。這是先指定大小再指定偏移的做法，道理是一樣的。但width和h寬，高=height是衝突的，不能同時使用，並且應該使用resize去指定圖片的縮放大小。用於Sprites時請務必在
img-css參數中正確填寫縮放後的完整圖片大小。
{{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>}}
.svg){kind=small}
說明
.svg){kind=link}
清明上河圖
說明：
- 顯示類型不一定要指定，這裡是為了放在一行里而寫的。雖然也支持裁剪和位移的參數，但不建議使用。
- 種類=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並用的時候會導致頻閃，所以應當使用原始設計。
| ||||||||||||||||||||||||||||