如何用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>

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

有没有办法通过改变数据比例或摄像机角度进行放大？或者一些css技巧是否足够？我从默认的example template开始。

Answer 1

你可以将这个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;

Answer 2

将此添加到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>

Answer 3

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

诀窍是在幻灯片上组合属性data-scale = 2（或大于2的数字），因此我们有<div class="step" data-scale=2></div>

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

<div class="step" data-scale=2> <img src="src/of/image.jpeg" style="position: absolute; left: 0px; top: 0px; z-index: -1; width: 9000px; height: 1000px"> </div>

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

有关详细信息，请参阅此链接：Hinco (impress.js contributor) Blog

Answer 4

我个人使用巨大的object-fit: cover/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>