如何在 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技巧就足够了？ 我从默认 示例模板开始。

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

我个人使用了很好的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>

Answer 4

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

诀窍是在幻灯片上组合属性 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 贡献者）博客