置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板:Fit-image

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋
Template-info.svg 模板文檔  [查看] [編輯] [歷史] [刷新]

介紹

本模板利用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 指定浮動方式 nonerightleft。可不需要float=,直接填寫。默認值為none
外部链接外链 在使用外部圖像時指定是否使用外部鏈接(此時的外部鏈接請務必帶上http://或https://) 外部链接外链不需要指定值。
宽度width 圖片的目標寬度 單位為px,請務必填寫單位
高度height 圖片的目標高度
模式mode object-fit屬性的參數 fillcontaincovernonescale-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
崩壞3希兒·度假.png
{{fit-image|崩坏3希儿·度假.png|height=380px|width=300px|mode=contain}}
cover
崩壞3希兒·度假.png
{{fit-image|崩坏3希儿·度假.png|height=380px|width=300px|mode=cover}}
fill
崩壞3希兒·度假.png
{{fit-image|崩坏3希儿·度假.png|height=380px|width=300px|mode=fill}}
none
崩壞3希兒·度假.png
{{fit-image|崩坏3希儿·度假.png|height=380px|width=300px|mode=none}}
scale-down
崩壞3希兒·度假.png
{{fit-image|崩坏3希儿·度假.png|height=380px|width=300px|mode=scale-down}}
帶內部鏈接的內部圖片
崩壞3希兒·度假.png
{{fit-image|崩坏3希儿·度假.png|height=380px|width=300px|link=希儿·芙乐艾}}
帶內部鏈接的外部圖片
{{fit-image|{{filepath:崩坏3希儿·度假.png}}|外部图片|height=380px|width=300px|link=希儿·芙乐艾}}
帶外部鏈接的內部圖片
崩壞3希兒·度假.png
{{fit-image|崩坏3希儿·度假.png|height=380px|width=300px|link=https://zh.moegirl.org.cn/}}
帶外部鏈接的外部圖片
{{fit-image|{{filepath:崩坏3希儿·度假.png}}|外部图片|外部链接|height=380px|width=300px|link=https://zh.moegirl.org.cn/}}
以外部圖片形式調用的萌百內部圖片
崩壞3希兒·度假.png
崩壞3希兒·度假.png
{{fit-image|崩坏3希儿·度假.png|外部图片|height=380px|width=300px}}

可以看到,圖片中沒有水印

注釋

  1. 在萌百以及其他大部分網站不會有「黑邊」