介紹
本模板利用object-fit屬性來實現圖像的裁剪，只需要輸入目標尺寸和裁剪模式便可以得到對應的圖片，適用於需要大規模統一圖片尺寸的情形。支持外部和內部圖像，並且可為圖像添加內部和外部連結。不過，建議不要使用本模板將小圖片強制放大。當以外部圖像形式調用萌百圖像時，所得圖像為未經壓縮且沒有水印的原圖，這在需要將圖像進行放大的場合很有用。但是考慮到萌百的伺服器的性能堪憂，所以還是儘量使用普通方法。
當僅填寫高度/寬度參數時，圖片只會等比例變換，所以如需裁剪圖片請同時填寫兩個參數。
模板會記住最新傳入的width、height和mode的值，這樣可以避免多次重複輸入參數，即：
{{fit-image|圖片1.png|height=380px|width=300px}}
{{fit-image|圖片2.png}}
{{fit-image|圖片3.png|width=789px|mode=contain}}
{{fit-image|圖片4.png}}
{{fit-image|圖片5.png|height=690px|width=8000px}}
{{fit-image|圖片6.png}}
//圖片1、2的height為380px，width為300px，mode為cover
//圖片3、4的height為380px，width為789px，mode為contain
//圖片5、6的height為690px，width為8000px，mode為contain
需要雪碧圖可以使用{{sprites}}模板，如需使用其他更為複雜的功能請使用{{image}}模板。
| 參數名 | 參數說明 | 參數示例 |
|---|---|---|
匿名參數1 |
內部圖像的文件名或者外部圖像連結，必須要填且必須是第一個參數 | 崩壞3希兒·度假.png |
外部、外部圖片、外部圖像 |
指定是否為外部圖像 | 外部、外部圖片、外部圖像不需要指定值。
|
float |
指定浮動方式 | none、right、left。可不需要float=，直接填寫。默認值為none
|
外部鏈接、外鏈 |
在使用外部圖像時指定是否使用外部連結（此時的外部連結請務必帶上http://或https://） | 外部鏈接、外鏈不需要指定值。
|
寬、寬度、width |
圖片的目標寬度 | 單位為px，請務必填寫單位 |
高、高度、height |
圖片的目標高度 | |
模式、mode |
object-fit屬性的參數 | fill、contain、cover、none、scale-down。默認值為cover
|
link |
給圖片添加連結，對外部圖像同樣生效。 | 希兒·芙樂艾 |
css |
在外部的<div>中添加css屬性 | display:inline-block;
|
class |
在外部的<div>中添加class | |
id |
在外部的<div>中添加id |
關於object-fit
以下內容來自：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
- contain
- 被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比
，因此如果寬高比與框的寬高比不匹配，該對象將被添加「黑邊」[1]。 - cover
- 被替換的內容在保持其寬高比的同時填充元素的整個內容框。如果對象的寬高比與內容框不相匹配，該對象將被剪裁以適應內容框。
- fill
- 被替換的內容正好填充元素的內容框。整個對象將完全填充此框。如果對象的寬高比與內容框不相匹配，那麼該對象將被拉伸以適應內容框。
- none
- 被替換的內容將保持其原有的尺寸。
- scale-down
- 內容的尺寸與 none 或 contain 中的一個相同，取決於它們兩個之間誰得到的對象尺寸會更小一些。
示例
contain
{{fit-image|崩壞3希兒·度假.png|height=380px|width=300px|mode=contain}}
cover
{{fit-image|崩壞3希兒·度假.png|height=380px|width=300px|mode=cover}}
fill
{{fit-image|崩壞3希兒·度假.png|height=380px|width=300px|mode=fill}}
none
{{fit-image|崩壞3希兒·度假.png|height=380px|width=300px|mode=none}}
scale-down
{{fit-image|崩壞3希兒·度假.png|height=380px|width=300px|mode=scale-down}}
帶內部連結的內部圖片
{{fit-image|崩壞3希兒·度假.png|height=380px|width=300px|link=希兒·芙樂艾}}
帶內部連結的外部圖片
{{fit-image|{{filepath:崩壞3希兒·度假.png}}|外部圖片|height=380px|width=300px|link=希兒·芙樂艾}}
帶外部連結的內部圖片
{{fit-image|崩壞3希兒·度假.png|height=380px|width=300px|link=https://mediawiki.org/}}
帶外部連結的外部圖片
{{fit-image|{{filepath:崩壞3希兒·度假.png}}|外部圖片|外部鏈接|height=380px|width=300px|link=https://mediawiki.org/}}
以外部圖片形式調用的萌百內部圖片
![崩壞3希兒·度假.png]("http://img.moegirl.tw/common/d/df/%E5%B4%A9%E5%9D%8F3%E5%B8%8C%E5%84%BF%C2%B7%E5%BA%A6%E5%81%87.png"/)
{{fit-image|崩壞3希兒·度假.png|外部圖片|height=380px|width=300px}}
可以看到，圖片中沒有水印
| |||||||||||||||||||||||||||||||||
注釋
- ↑ 在萌百以及其他大部分網站不會有「黑邊」