Javascript 如何在impress.js中用图像填充屏幕？

我的Impresse.js幻灯片中有我想填满屏幕和中心的图像，下面是代码：

<div id="impress">
    <div class="step" data-x="-10000" data-y="100" data-z="0"  data-scale="1">
        Introduction
    </div>
    <div class="step" data-x="-10000" data-y="-1100" data-z="1000" data-scale="1">
        <img src="images/Wallpaper-Abstract-Fractal-Flowers-Lilies.jpg" >
    </div>
</div>

介绍

现在它看起来像下面，但我希望第二张幻灯片中的图像填满屏幕（保持纵横比）

---

是否有办法通过更改数据比例或相机角度来放大？或者一些css技巧就足够了？我是从默认设置开始的。

你可以使用这个CSS作为图像，我一定会工作的

/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;

将此添加到css中（X是相关步骤的编号）：

这是html的一部分：

<div class="step" data-rel-x="2000" data-rel-y="0">
<img src="path/to/image.png" alt="">
</div>

---

这个答案已经很晚了。但它可能会帮助一些谷歌（我们所有人）以后：）

诀窍是在幻灯片上组合属性数据比例=2（或大于2的数字），因此我们有

然后我们用图像填充此幻灯片，并增加图像的高度和宽度属性。最后我们有这样的东西：

我们可以将数据比例和图像的尺寸（高度、宽度）结合起来，直到我们对图像的质量感到满意为止

---

有关更多详细信息，请参阅此链接：

我个人正在使用大

对象匹配：cover/contain属性，我将图片的大小设置为视口的大小，这就足够了。请注意，如果您愿意，它也可以用于视频

.fitImage {
    width:  100vw;
    height: 100vh;
    margin: 0;
    padding:0;
    background: black;
}


.fitImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


谢谢，但这似乎不起作用。它确实会将图像放大一点，但也会使图像偏离中心。请将您的页面链接发送给我。然后它将很容易理解，请访问此链接可能会对您有所帮助
.fitImage {
    width:  100vw;
    height: 100vh;
    margin: 0;
    padding:0;
    background: black;
}


.fitImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

    <div class="step fitImage" data-x="0" data-y="0" data-scale="2">
        <img src="picture.png" />
    </div>