宽屏图像裁剪器

使用方法

在任意维基上添加：

[[include :scp-wiki-cn:component:wide-image-sizer]]


接着添加图片：

[[include component:image-block
    name=（你的图片链接）|
    caption=（你的图片描述）|
    align=center |
    width=100%
]]

这是什么

一个能将一张宽屏图像自动裁剪为高215px、且宽度适合当前屏幕的组件。这样可以确保在各种设备上获得一致的观看体验，同时避免需要精确裁剪源图像。

它是什么样的

使用组件后：

with-component.png

使用组件前：

without-component.png

此CSS由 WoedenazWoedenaz 制作，此组件由 aismallardaismallard 制作。
+ 展示源代码- 隐藏源代码
css
.scp-image-block.block-center {
    position: relative;
}
.scp-image-block.block-center img {
    height: 215px;
    width: 100%;
    object-fit: cover;
}
组件
页面版本：⁨0⁩, 最后编辑于: ⁨2020/3/2 09:20:03⁩ (⁨⁨2389⁩ 日前⁩), 现时评分: 7
历史 附件 + 选项