模板:Fit-image/doc

介绍

本模板利用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

被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

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://zh.moegirl.org.cn/}}

带外部链接的外部图片

[1]

{{fit-image|{{filepath:崩坏3希儿·度假.png}}|外部图片|外部链接|height=380px|width=300px|link=https://zh.moegirl.org.cn/}}

以外部图片形式调用的萌百内部图片

{{fit-image|崩坏3希儿·度假.png|外部图片|height=380px|width=300px}}

可以看到，图片中没有水印