置顶公告:【置顶】关于临时开启评论区所有功能的公告(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. 在萌百以及其他大部分网站不会有“黑边”