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

【问题标题】：How to fill the screen with image in impress.js?如何在 impress.js 中用图像填充屏幕？
【发布时间】：2016-06-01 06:03:12
【问题描述】：

我的 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开始。

【问题讨论】：

标签： javascript css image impress.js

【解决方案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;

【讨论】：

谢谢，但这似乎不起作用。它确实将图像放大了一点点，但也会使图像偏离中心。
你能把你的页面链接发给我吗？那么就很容易理解了
请访问此链接devdiz.com/designing/full-screen-responsive-background可能会对您有所帮助

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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 contributor) Blog

【讨论】：