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

Question

我的 impress.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>

现在它看起来像下面这样，但我希望第二张幻灯片中的图像填满屏幕(保持宽高比)。

是否有某种方法可以通过更改数据比例或相机 Angular 来放大？或者一些 css 技巧就足够了吗？我从默认的 example template 开始.

Answer 1

将此添加到 css(X 是相关步骤的编号):

#step-X html,body{
    margin:0;
    height:100%;
    overflow:hidden;
}
#step-X img{
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:-100%; bottom:-100%;
    left:-100%; right:-100%;
    margin:auto;
}

并将此添加到 html 中:

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